Menu
I am setting up a website like this (vertical slideshow almost):
http://mikelegacywebdesign.com/scrollpage_test/index.html
The one thing I am looking to do that I can't figure out is how to make the scrolling SNAP to the point where the color change is while scrolling.
For example, when scrolling, you get to about 50-100 px near the top of the next color you are scrolling to, it would be nice if that would snap to that point, instead of just continuing to scroll, because it is hard to get that "frame" to perfectly align. It's dependent on the user to scroll the perfect amount so that they are viewing the full frame, and not pieces of the former or next frame in the sequence.
Anyone that knows if there is a jQuery plugin or something for this would be my hero.
Here is the ENTIRE page so far. It's simple coding to get the current effect:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Scrollpage Test</title>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; width: 100%; }
.container { height: 400%; width: 100%; }
.section { height: 35%; width: 100%; }
#section1 { background-color: #1d9ad7; }
#section2 { background-color: #c83e3d; }
#section3 { background-color: #75b946; }
#section4 { background-color: #f4be2f; }
</style>
</head>
<body>
<div class="container">
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
<div class="section" id="section4"></div>
</div>
</body>
</html>
675
CSS Scroll Snap is supported in all major browsers. A previous version of the specification was implemented in some browsers, and may appear in tutorials and articles. If material includes the deprecated scroll-snap-points-x and scroll-snap-points-y properties, it should be considered outdated.
The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one.
If you want smooth scrolling to HTML anchor tags without using JS then you can achive this by using scroll-snap-type , scroll behavior , and scroll-snap-align CSS propeties. So the point is that in this scenario, the scroll-behavior: smooth declaration goes on the containing div not on the html selector.
Add an “overflow-y scroll.” Then scroll-snap-type:y mandatory. Next, to the child section element, add a scroll snap align start. Done, when I do the single scroll on the mouse wheel, it snaps right into the next section.
Yes, it's possible. Their code is quite awful though. While animating scrollTop, you'll want to make sure that additional user-input that normally leads to scrolling is ignored. Have a look at this test-case to get an idea about how to prevent a user from scrolling.
194
You can get the desired effect using the
scroll() jumpScroll() scrollBy()
and a little bit of your own code.
For example,
function jumpScroll() {
window.scroll(0,250);
}
Would scroll to that point on the page
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
