CSS snap scroll: How do I induce the snap scrolling in the middle of a div?
Question
I have a website where I transform the header on scroll. I am now working on implementing CSS snap scrolling to the entire site. Because of this, the scroll-event in javascript obviously doesn't get triggered when the user scrolls down. How might I solve this problem?
I am very new to this so I have not yet tried using any libraries, and would like to avoid that for the time being.
1 answers
solution1
0 2019-08-28 14:01:01
Scrollsnapping is nothing that should interfere with the scrollEvent. Please see this CodePen for a minimal working example. Open the console and scroll, there you'll see the scrollEvent firing.
document.addEventListener('scroll', (event) => console.log(event));
body { margin: 0; scroll-snap-type: y mandatory; } div { height: 100vh; scroll-snap-align: start; } div:nth-child(odd) { background-color: #7FDBFF ; }
<html> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>
Can you provide a code example with your specific problem? This will make it easier to help you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.