Hi,
I am trying to get the scrollbox using angular4 application. I am getting the error 'Cannot find module pixi-scrollbox'.

I did 'npm install pixi-scrollbox' and using in component as
import * as Scrollbox from 'pixi-scrollbox'

Environment:
Pixi: 4.8.1
Pixi-scrollbox: 1.1.0
Angular : 4.2.4
Angular CLI : 1.7.3

Thanks,
Naveen.

After the parent element is rotated 90 degrees, when the content is dragged, the horizontal and vertical are reversed

The ScrollView is great, but i wanna use sprite to set my scrollbar , is this possible?

I want to use it in version pixijs6.4.2. Which version should I select? include pixi-scrollbox and pixi-viewport.

Getting:
pixi_scrollbox_1.ScrollBox is not a constructor

When using as follows:
`
import { ScrollBox } from 'pixi-scrollbox';
this.app = new PIXI.Application({
backgroundColor: 0x1099bb,
width: this.width,
height: this.height
});

this.viewport = new ScrollBox({ boxWidth: this.width, boxHeight: this.height});
this.container.appendChild(this.app.view);
this.app.stage.addChild(this.viewport);
`

I constructed a scrollBox with boxWidth and boxHeight I wanted. Then I gather the items that I want to show in the scroll box in a PIXI.Container and add into scrollBox.content. Everything works fine, but the scroll wheel listener not follow scrollBox position and goes off.

I tried to .resize() and .update() the scrollBox again after added in items containers, but not work either.

Can someone help me with this?

Thanks.

I'm only using a horizontal scrollbar and I'm getting an infinite scroll when I set dragScroll to false. In other words I can keep scrolling past the scrollWidth.
I can scroll as much as I want to the left and until the scrollbar disappears to the right (but still well past the required scrollWidth).

I wonder if it could be related to the _bounds property's values, although those look exactly the same with or without drag enabled?

The Issue

This code suggested in the README doesn't seem to work for me:

<script src="/static/js/lib/pixi.js"></script>
<script src="/static/js/lib/pixi-viewport.js"></script>
<script src="/static/js/lib/scrollbox.js"></script>
<script>
    const Scrollbox = new Scrollbox(options)
</script>

I get this error: Uncaught ReferenceError: Cannot access 'Scrollbox' before initialization

Related

FWIW, I was also trying to get it to work with requireJS. I am able to get pixi, pixi-filters, and bump loading, but when I try and add in scrollbox, I get errors like Uncaught Error: Script error for "@pixi/math", needed by: pixi-viewport

Sorry if this is just me knowing nothing about node and little about JS builds, or just messing up requirejs syntax!

<script type="text/javascript">
	require.config({
	    paths: {
	        'pixi': '/static/js/lib/pixi',
	        'pixi-filters': '/static/js/lib/pixi-filters',
	        'bump': '/static/js/lib/bump',
	        'scrollbox': '/static/js/lib/scrollbox',
	        'pixi-viewport': '/static/js/lib/pixi-viewport',
	    },
		shim: {         
            'pixi-filters': {
                deps: ['pixi']
            },
            'pixi-viewport': {
                deps: ['pixi']
            },
            'scrollbox': {
                deps: ['pixi', 'pixi-viewport']
            }
        }    	    
	});

	var gameRoom;
	var gameUX;

	require(['pixi', 'pixi-filters', 'bump', 'scrollbox'], function () {
		gameUX = new GameUX();
		gameRoom = new GameRoom(gameUX);
		gameRoom.connect();
		// const Scrollbox = require('scrollbox').Scrollbox
		// const scrollbox = new Scrollbox({ boxWidth: 200, boxHeight: 200})
	});
</script>

scrollbarDown function need to count with scrollbarOffsetHorizontal?

if (local.y > this.boxHeight - this.scrollbarSize) {

if (local.y > this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal) {

Trying something like:

scrollBox.scrollLeft = 0

But got:
Uncaught TypeError: Cannot set property scrollLeft of # which has only a getter

It's weird...

Both scrollbox.js and scrollbox.min.js in the 1.6.0 release are actually HTML files.
(e.g. first few lines of the minified one are:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

.. etc)

Hello!

I've had a request by client to increase the amount of friction on the scroll effect, so that it slows down sooner. Is there a publicly accessible API call to do this?

How can I tell the scrollbar or rather the viewport to scroll on the x axis using the mousewheel?

From the api of viewport I thought this should have worked:

`scrollbox.content.wheel = false

scrollbox.content.drag( {
direction: 'x',
wheel: true
})`

But it didn't, am I doing this all wrong? Can someone show me how to achieve this?

Hi, I couldn't find a similar issue so I'm opening this one.

If I scroll in the scrollbox to the end, items inside become non-interactable. They automatically become interactable again if:
1- I scroll to middle (anywhere in the scrollbar that is not the end. (scrollbox.scrollLeft = 0.1 works, for example)
2- I interact with another pixi element thats out of the scrollbox, and come again into the scrollbox

Using v2.3.0.

I wanted to ask if this issue is known and if there is a cleaner solution for this than manually adding margin to scrollbar position

Thanks in advance

57 import InteractionEvent = PIXI.interaction.InteractionEvent;
~~~~~~~~~~~
node_modules/pixi-layers/dist/pixi-layers.d.ts:106:36 - error TS2694: Namespace 'PIXI' has no exported member 'interaction'.

106 import InteractionEvent = PIXI.interaction.InteractionEvent;
~~~~~~~~~~~

Hello!

While doing a build with Webpack I received this build error from UglifyJS

ERROR in bundle.js from UglifyJs
Unexpected token: keyword «const» [./node_modules/pixi-scrollbox/dist/scrollbox.es.js:257,0][bundle.js:53985,0]

Any idea on how to fix it?
(Great library, by the way! 😄)

Regards
kk.

I noticed that on Firefox the scroll is very slow with a mouse wheel, no issue with Mac trackpad and no issue on others browsers.

I tried to play with content.decelerate without success. any idea how to fix it?

Hello, this seems like a great library! So far it's been very straightforward to integrate into my game.

I do have a problem, though, with interactive objects within the scrollbox. In my case, these are text boxes for which I subscribe to the pointertap event. I don't want the pointertap event to fire, though, in the case that the ScrollBox has already handled it.

Can you think of a way where I could filter out those pointertap events that have been used to scroll? Or perhaps there is some other way to achieve this?

Thanks a lot

I just want to do zooming like pixi-viewport. Is there a way to do this? Thanks very much!

when page destroy,the scrollbox's updateLoop will go on
how to stoy it,thanks

Is it considered to push this project into a CDN like CDNJS?

I like to dynamically change scrollbox's scroll height in JS code.

I want to know, thx !

@types/index.d.ts: 43 ScrollBox to Scrollbox or do else in "pixi-scrollbox"
ps - i mean, that you have different names in types and library :)

Whenever I try to inspect a pixi instance with a scrollbox on it I get this error:

Uncaught DOMException: Failed to execute 'postMessage' on 'Window': scrollbarMove(e) {
if (this.pointerDown) {
if (this.pointerDown.type === 'horizontal') {
...... } could not be cloned.

I am almost sure that is worked at some point, but in the state it is in now I can only get rid of the error by removing the scrollbox. Has anyone experienced this before and is there a workaround?

Hi,
I would like to use it for a chat, so i need to automaticly scroll to the bottom of my scroll box each time i create a scroll box (to watch the most recent messages) is it possible currently ? i didn't find how.

Is there a value that i am supposed to change ?

=================

const scrollBox = new Scrollbox.Scrollbox ({ boxWidth: HUDChatWidth, 
                                                boxHeight: HUDChatHeight,
                                                contentWidth: HUDChatWidth*0.9,
                                                contentHeight: HUDChatHeight*0.9,
                                                dragScroll: true,
                                                scrollbarOffsetHorizontal : 0,
                                                underflow: "none"})

        chat.forEach(m => {
            text += m +"\n";
        })
        scrollBox.content.addChild(new PIXI.Text(text, {fontFamily : 'Arial', 
                                                        fontSize: 24, 
                                                        fill:0xCCCCCC, 
                                                        align : 'left', 
                                                        wordWrap:true, 
                                                        wordWrapWidth: HUDChatWidth -24, 
                                                        height: HUDChatHeight-10, 
                                                        breakWords:true}));
        //here, scroll to the bottom of my scrollBox ?
        scrollBox.update();

Can I use pixi-scrollbox for my project without worrying?
Becuase It's js, not ts.
I wonder your opinion.
Or, pixi-viewport replace this?

Can you able to tell me if scrollbox supports TypeScript as i cant find a index.d.ts?

Why is that? Seems like some clamping takes effect when you scroll the mousewheel. Dragging works as expected. Can I disable the mousewheel as a quick fix?

Like so?

scrollbox.content.drag({wheel: false})

Ok explaining it made me try clampWheel: false, that did the trick.

I have created a game in pixi.js and for the leaderboard i want to show top 50 players so i did a research and found this repository but as soon as i run npm i pixi-scrollbox my console is filled with errors on which i have no command cause those issues are not in my code there are coming from pixi.js stating that these exports are not present but when i uninstall pixi-scrollbox everything went to normal. Can you help me with these errors?

snapshot of errors

When I click on the scroll rectangle and start scrolling the scroll doesn't keep up with the mouse. In other words for every given mouse move the scroll is less instead of equal. Is that configurable somehow?

Here is a CodeSandbox.
I give 2 Sprites in the CodeSandbox:

• Sprite1: [-200, -200]
• Sprite2: [600, 600]
  then the Sprite1 is not show up on the scrollbox.
  Can you give me some help?

Hi,
I am trying to insert clickable elements into the Scrollbox, but they do not work :(

Code example:

let scrollbox = new Scrollbox({
  boxWidth: 550,
  boxHeight: 348
});
parentContainer.addChild(scrollbox);

// insert element
let tableStringContainer = new PIXI.Container(),
      hitArea = new PIXI.Graphics();

hitArea.beginFill(0x000000, 0);
hitArea.drawRect(0, 0, 540, 35);
hitArea.interactive = true;
hitArea.buttonMode = true;

hitArea
  .on('click', function() {
    console.log('click');
  })
  .on('mouseover', function() {
    console.log('mouseover');
  })
  .on('mouseout', function() {
    console.log('mouseout');
  });
tableStringContainer.addChild(hitArea);
scrollbox.content.addChild(tableStringContainer);

scrollbox.update();

Thanks,
Dima.

I've managed to get my environment all mucked up, so providing a minimally reproducible example is going to be pretty hard. But I'm trying to do various cursor (change cursor, set onMouseDown) events on elements inside the scrollbox, and the final barrier was the this._maskContent graphic that wasn't propagating events down to the PIXI sprites I had added. Just wanted to open this up for discussion, not sure if there's anything immediately actionable.

I have an app with a bunch of sprites representing cards, in a horizontally scrolling tray representing a hand. I have implemented the tray using Scrollbox. In spite of my setting `stopPropagation' to false, the "click" events aren't getting through to the cards, though the Scrollbox is seeing them. If I change from Scrollbox to Viewport (and add the sprites directly to cardScroller rather than to cardScroller.content) they do get through.

I'm at a loss. This was working, and has just recently stopped working, and there's no obvious change I've made that seems related. I've updated to the latest Scrollbox with no effect.

Here's my code. It's long, but I don't know what is relevant. Definitely looking over my shoulder on this one.

export function createCardScroller(player, resources) {
  const cardScroller = new Scrollbox({
    boxWidth: resources.cardScroller.width,
    boxHeight: resources.cardScroller.height,
    stopPropagation: false,
    dragScroll: true,
    overflowY: 'hidden',
    fade: true,
  });

  function fetchCard(cardId) {
    return Cards.findOne(cardId);
  };
  const hand = R.map(fetchCard, player.combatant.hand);

  function isInUse(card) {
    return (player.playedCard.get() && card._id === player.playedCard.get()._id)
          || (player.enhanceCard.get() && card._id === player.enhanceCard.get()._id);
  }
  var currentHand = R.reject(isInUse, hand);

  function createCS(card) {
    const cardSprite = createCardSprite(player, card, resources);
    return cardSprite;
  }

  const cardSprites = R.map(createCS, currentHand);

  const desiredHeight = resources.cardScroller.height;
  function setScale(sprite) {
    const scale = desiredHeight / sprite.height;
    sprite.scale.x = sprite.scale.y = scale;
    return sprite;
  }
  R.map(setScale, cardSprites);

  const cardStride = cardSprites.length > 0 ? cardSprites[0].width*1.1 : 50;

  function setPositionAndAdd(accum, cardSprite) {
    cardSprite.position.set(accum, 0);
    //cardScroller.addChild(cardSprite);
    cardScroller.content.addChild(cardSprite);
    return accum + cardStride;
  }
  R.reduce(setPositionAndAdd, 0, cardSprites);

  cardScroller.update();
  cardScroller.on('click', function(e) {console.log('clicked cardScroller'); console.log(e)});
  return cardScroller;
}

Just not working.
package.json
{
"name": "pixiscr",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"pixi-scrollbox": "^2.3.1",
"pixi-viewport": "^5.0.2",
"pixi.js": "^7.3.2",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4"
}
}

const PIXI = require('pixi.js')
const Scrollbox = require('pixi-scrollbox').Scrollbox

// create the scrollbox
const scrollbox = new Scrollbox({ boxWidth: 200, boxHeight: 200})
// add the viewport to the stage
const app = new PIXI.Application()
document.body.appendChild(app.view)
app.stage.addChild(scrollbox);

ERRORS in console

1. Uncaught TypeError: Cannot read properties of undefined (reading 'domElement')---- this.viewport.options.events.domElement
2. Uncaught TypeError: Cannot read properties of undefined (reading 'update') --- this.plugins.update(t)

I have noticed that when using this scrollbox, the visuals in the container are moving but the click "hitboxes" are not.

Below is a modified example from davidfig where I have reduced the content height to force vertical scrolling:

function test()
{
    let scrollbox = new Scrollbox.Scrollbox({
        boxWidth: 550,
        boxHeight: 100
    });
    _renderer.stage.addChild(scrollbox);

    // insert element
    let tableStringContainer = new PIXI.Container(),
        hitArea = new PIXI.Graphics();

    // just added some colors and circles so I can see the scrollbox and target
    hitArea.beginFill(0xff0000).drawCircle(0, 0, 100).endFill()
    hitArea.beginFill(0xff0000, 1);
    hitArea.drawRect(0, 0, 540, 35);
    hitArea.endFill()
    hitArea.interactive = true;
    hitArea.buttonMode = true;

    hitArea
        .on('click', function ()
        {
            console.log('click');
        })
        .on('mouseover', function ()
        {
            console.log('mouseover');
        })
        .on('mouseout', function ()
        {
            console.log('mouseout');
        });
    tableStringContainer.addChild(hitArea);
    scrollbox.content.addChild(tableStringContainer);

    scrollbox.update();
}

window.onload = function ()
{
    _renderer = new PIXI.Application({ transparent: true, width: window.innerWidth, height: window.innerHeight, resolution: window.devicePixelRatio })
    document.body.appendChild(_renderer.view)
    _renderer.view.style.position = 'fixed'
    _renderer.view.style.width = '100vw'
    _renderer.view.style.height = '100vh'
    _renderer.view.style.left = 0
    _renderer.view.style.top = 0
test()
return

    horizontalVertical()
    vertical()
    horizontal()
    const nodrag = horizontalVertical('dragScroll=false (drag scrollbars to move)')
    nodrag.position.set(400, 425)
    nodrag.dragScroll = false
    window.addEventListener('resize', resize)

}

For me, the click events on the circle area are persisting on the left side of the screen, even when the circle is scrolled out of view.

Thanks

I have 1000 childs (single sprite) in scrollBox.content

Having 100 items is ok.
But If I have 1000 items, the scrolling cause high cpu usage (almost 100%) + very laggy.
How to solve this problem?
I want to have long text lists.

It say : Uncaught ReferenceError: require is not defined. How to use with file .min.js. I added pixi.min.js but not work

I tried to use the scrollbox in my app, but the scroll wheel position is not the same as the box position.

While the box position is correctly tied to the app size and is placed at the top left corner of the app, the scroll wheel position is not and seems to be still tied to the original window size and will be positioned at the top left corner of the original window.
I tried to use resize() to fix it, but that doesn't seem to work.

Anyone know how to fix this?

Code:

const appSize = new Vector2(window.innerHeight * 0.5625, window.innerHeight);

const app = new PIXI.Application({
  width: appSize.x,
  height: appSize.y,
  backgroundColor: new Color(0, 0, 0).hexCode,
  resolution: window.devicePixelRatio || 1,
  autoDensity: true
});

app.renderer.resize(appSize.x, appSize.y);
document.body.appendChild(app.view);

const scrollbox = new Scrollbox({ boxWidth: 200, boxHeight: 200 })
const sprite = scrollbox.content.addChild(new PIXI.Sprite(PIXI.Texture.WHITE))
sprite.width = sprite.height = 500

scrollbox.content.addChild(new PIXI.Text("test"));
scrollbox.update()

app.stage.addChild(scrollbox);

Drawing of issue: