onWheel event touchpad issues

Adobe XD UXP Plugin API
, , ,
1

Issue

The wheel event fires a bunch of scroll events with a deltaY of 0 when using the touchpad. I would imagine (even though I’m not sure, of course) that the touchpad outputs small decimal numbers “natively” that then get floored to 0. Otherwise, this wouldn’t make sense, as a wheel event with a delta of 0 just isn’t a wheel event…

Steps to reproduce

export default function ScrollContainer({children}: { children: ReactNode }) {
    const [pos, setPos] = useState(0);

    const innerContainer = useRef<HTMLDivElement>(null);
    const outerContainer = useRef<HTMLDivElement>(null);

    const applyWheel = useCallback((e: React.WheelEvent<HTMLElement>) => {
        console.log('wheel', e.deltaY, e.deltaX, e.deltaZ, e.deltaMode);
        const min = (outerContainer.current?.clientHeight || 0) - (innerContainer.current?.clientHeight || 0);

        const newPos = Math.max(Math.min(pos + e.deltaY, 0), min);
        setPos(newPos);
    }, [pos, setPos, innerContainer, outerContainer])


    return <div className="scroll-container" ref={outerContainer} onWheel={applyWheel}>
        <div className="scroll-container-inner" ref={innerContainer} style={{bottom: pos}}>
            {children}
        </div>
    </div>
}

Render this React component (TSX) and use the touchpad to scroll vertically inside it.

Expected Behavior

Mostly non-zero deltaY numbers for evt.deltaY), as in, say, Chrome:

image
image507×841 12.7 KB

Actual Behavior

image
image140×894 724 Bytes

(this logs the event with, in this order, deltaX, deltaY, deltaZ and deltaMode, not that it matters too much as they are all 0)

Additional information

I only tested this on Windows as I don’t have a macOS testing machine with a touchpad.

2

One quick additional note: It kind of works. Now and then, non-zero delta values get spit out by the event, but this is sporadic and than makes huge jumps. At the very least, it’s not the desirable behavior :stuck_out_tongue_winking_eye:

3

Thanks for letting us know about this issue. After trying on a variety of systems I was able to replicate it, but only on a Windows laptop and only when I set the touchpad sensitivity to lowest. I logged a bug with the XD team.

1 Like