Click events not scrolling with the view?

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

[davidfig]

Ok, I fixed this bug. You need to update pixi-scrollbox and pixi-viewport from npm.

The bug was caused by pixi-viewport.plugins.clamp(). pixi.js’s interaction module does not handle containers that move (ie, if the container’s position is changing, then it won’t register an interaction–which is a weird omission). The viewport.plugins.clamp was improperly changing the position of the viewport (to the same clamped position) each frame even if nothing needed changing.

Let me know if there are any problems with this fix.

[davidfig]

Can you create a jsfiddle so I can play with it and find the problem? Thanks!