parsisolution / os-scroll-chain Goto Github PK
View Code? Open in Web Editor NEWOverlayScrollbars Extension to prevent scroll chaining
License: MIT License
OverlayScrollbars Extension to prevent scroll chaining
License: MIT License
I have tried to add this extension in my angular app. But getting this error - index.js:1 Uncaught ReferenceError: OverlayScrollbars is not defined
I have added the cdn in my index.html -
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/os-scroll-chain@1/dist/os-scroll-chain.min.js"></script>
I have added these two in my main ts file
import * as scrollChain from 'os-scroll-chain';
OverlayScrollbars.extension("scrollChain", scrollChain );
Then in my custom overlay scrollbar component I have used this -
OverlayScrollbars(
this.osTarget(),
this._options || {},
{ scrollChain: {vertical: false, horizontal: false} }
);
This isn't technically an issue with the library, but I couldn't find a more appropriate place for my questions. I hope you don't mind me asking them here.
I'm trying to port the scroll-chain solution used here into a project of my own which doesn't use Vue. I think I have everything replicated properly, but I'd like to understand a little more about how the internals of this tool work so I can write up some good unit tests.
If you have the time, I'd love a bit more insight. I think the questions below should cover everything I'd like to understand a bit better:
It appears to me that touchmove events are only ever defaultPrevented if the very first touchmove event would drag the scroller past the minimum or maximum scroll offset. Is this correct? Does this behavior come with any caveats?
It appears to me that once the first touchmove event is defaultPrevented, all subsequent touchmove events in the gesture are also defaultPrevented, regardless of the direction of the gesture. Is this required to deal with a particular browser's scroll-chaining implementation? Or is it an oversight or a deliberate simplification?
What's the reason for adding an extra 0.5 pixels to the scrollLeft and scrollTop values?
It appears that an axis is marked as 'significant' if the user dragged at least twice as many pixels along the significant axis compared to the insignificant axis. Is this a deliberate choice and if so, what's the reason for it?
I noticed the script tries to prevent scroll-chaining by calling preventDefault on specific wheel/touch events as well as by applying the overscroll-behavior css style. Is there a reason for using both strategies rather than only using one or the other? Are there notable limitations to either implementation that are worth being aware of?
Thanks for taking the time to write this tool and I look forward to your feedback.
There is an outdated file version at CDN url from Installation block in README file (v1.0.0 instead of available v2.0.0).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.