Comments (5)
Hello!
Thanks for the feedback.
1 - I'll think about adding demos for common use cases.
2 - it's up to you to smooth or not the scroll delta. By default it just copies what the mouse is sending.
3 - I have not used ScrollTrigger, but after a quick look at the docs it looks like you should be able to set the ScrollTrigger scroll value to sync with your virtual-scroll. Something like ScrollTrigger.scroll(y) where y
is your virtual-scroll value.
4 - I am not sure what you mean - each page should have their own virtual-scroll instance, not a global one for the whole site. You can also enable/disable each instance by calling .on/.off
from virtual-scroll.
Thanks for replying back. Here is my reply with reference to the points above in your reply.
2- How I can enable smooth?.
4- I was talking about ajax page loading or single-page application using routers. And in that case, I will have to destroy the current page scroll instance and then reinitiate the scroll instance when the next page dom is loaded or in the second scenario, I will just update the scroll instance when the next page dom is loaded. I hope that makes sense but in either situation, I don't see the options in docs for the scroll.update() or destroy, etc like locomotive scroll is doing.
I love smooth scroll and I have some libs in my code cupboards and that's the reason I gave yours a try and gave my feedback to you.
Regards,
ShehzadAsif
https://www.shehzadasif.com/
from virtual-scroll.
To smooth the scroll value, you can use a simple easing like so:
const scroller = new VirtualScroll()
let smoothY = 0
scroller.on(event => {
smoothY += (event.y - smoothY) * 0.1;
wrapper.style.transform = `translateY(${smoothY}px)`
})
There is a .destroy() method that you can call when destroying the current page. Then create a new virtual-scroll for the new page.
from virtual-scroll.
from virtual-scroll.
Does it work well?
from virtual-scroll.
Related Issues (20)
- It is not working at all. I would like an example of how to use it. HOT 2
- Edge Bug HOT 1
- VirtualScroll is not defined HOT 1
- Is there anyway to check when scroll stops using the .on() method? HOT 1
- Add option to disabled keyboard control HOT 4
- Issue with mobile device HOT 1
- Broken when scroll back to top HOT 1
- Fake Scrollbar with `scroll` event? HOT 1
- How to disable virtual-scroll for touch-devices? HOT 1
- Check accessibility / Other ways to trigger scroll HOT 5
- firefoxMultiplier for Macs HOT 4
- Compiled script in npm registry HOT 1
- Example Next.js Typescript Hook
- Issue on Firefox with trackpad HOT 11
- Ivy compiler compatibility
- Github lists 2.0.0 as latest release
- Allow to pass a custom element as event target HOT 1
- Start Scroll Event HOT 5
- IE Edge trackpad problem HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from virtual-scroll.