Is there any way to redirect/auto-scroll to the next section of my html doc and not allowing manual default scroll?
Question
I am currently making a website, where the user shouldn't be able to scroll, and when he does try to, it takes him to the next section, something like this:
console.log('scroll to the next div'); /*Not sure if I can make the run snippet appear without js*/
* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; flex-direction: column; } .sec1 { background: red; height: 100vh; width: 100vw; } .sec2 { background: blue; height: 100vh; width: 100vw; } .sec3 { background: steelblue; height: 100vh; width: 100vw; }
<! DOCTYPE html> <html lang="en"> <head> <title> section scroll auto </title> </head> <body> <section class="sec1"> ... </section> <!--on scroll, go to next div/section--> <br> <section class="sec2"> ... </section> <section class="sec3"> ... </section> </body> </html>
Is there anyway to achieve this without the use of jQuery? I've tried using anchor tags with href as the id of the next section, but it's not that efficient: it doesn't give me much control over the scrolling. I have a vague idea of what I can do, but I want a clear explanation. Thank you.
1 answers
solution1
1 ACCPTED 2021-07-27 15:06:31
You don't need any JS for this. You can accomplish it with pure CSS using scroll-snap . You can read the official docs here and look at a tutorial here
* { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-snap-type: y mandatory; } .sec1 { background: red; height: 100vh; width: 100vw; } .sec2 { background: blue; height: 100vh; width: 100vw; } .sec3 { background: steelblue; height: 100vh; width: 100vw; } .sec1, .sec2, .sec3 { scroll-snap-align: start; }
<! DOCTYPE html> <html lang="en"> <head> <title> section scroll auto </title> </head> <body> <section class="sec1"> ... </section> <!--on scroll, go to next div/section--> <section class="sec2"> ... </section> <section class="sec3"> ... </section> </body> </html>
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.