scrollbooster icon indicating copy to clipboard operation
scrollbooster copied to clipboard

CSS scroll-behavior: smooth; breaks native mode

Open interactiveRob opened this issue 4 years ago • 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); `

interactiveRob avatar Jul 21 '21 01:07 interactiveRob