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;
});
},
};
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; }})(window);
export default Object.create(DragScroll); `