ilyashubin / scrollbooster

Enjoyable content drag-to-scroll library
https://ilyashubin.github.io/scrollbooster
MIT License
986 stars 81 forks source link

CSS scroll-behavior: smooth; breaks native mode #80

Open interactiveRob opened 3 years ago

interactiveRob commented 3 years ago

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); `