ilyashubin/scrollbooster

CSS scroll-behavior: smooth; breaks native mode

interactiveRob opened this issue · 0 comments

Simple implementation below.

I have scroll-behavior: smooth; on my viewport element, that causes it to scroll very slowly and sometimes freeze like it's trying to calculate what to do. Removing this CSS property entirely allowed the plugin to scroll the div smoothly as desired.

Fix: You should mention this in the documentation.

My implementation--

`import ScrollBooster from 'scrollbooster';

let DragScroll = (({}) => {
class DragScroll {
constructor(node) {
this.node = node;
this.content = this.node.querySelector([data-js="scroll-content"]);
this.nodeExists = exists(this.node);
if (!this.nodeExists) return;
}

    initPlugin() {
        let sb = new ScrollBooster({
            viewport: this.node,
            content: this.content,
            scrollMode: 'native',
            direction: 'vertical',
            pointerMode: 'mouse',
        });
    }

    init() {
        if (!this.nodeExists) return;
        this.initPlugin();
    }
}

return {
    init({ selector }) {
        let nodeList = document.querySelectorAll(selector);

        if (!nodeList.length) return;

        return [...nodeList].map((node) => {
            let module = new DragScroll(node);
            module.init();

            return module;
        });
    },
};

})(window);

export default Object.create(DragScroll);
`