kai*_*ias 8 html javascript css scroll-snap
我正在努力解决 CSS 中的滚动对齐问题。
有没有一种方法可以仅在一个垂直方向上使用滚动捕捉？
我想让它在向下滚动时捕捉到每个部分，但在再次向上滚动时不捕捉到。可以在 CSS 中实现吗？或者我需要一些 JavaScript 吗？
html {
scroll-snap-type: y mandatory;
}
body {
margin: 0;
scroll-snap-type: y mandatory;
}
section {
font-family: sans-serif;
font-size: 12ch;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: start;
}
<head>
<!-- MAIN STYLE -->
<link rel="stylesheet" href="style.css">
</head>
<main>
<section>
<h1>Hello!</h1>
</section>
<section>
<h1>Toodles~</h1>
</section>
<section>
<h1>Boodles~</h1>
</section>
</main>
</html> 您可以监听滚动事件并根据滚动方向设置元素scroll-snap-type的属性。html
//save initial scrollY position
var previousScrollY = window.scrollY;
//listen to scroll event
window.addEventListener("scroll", function(e) {
//is the user scrolling down ?
let down = window.scrollY > previousScrollY;
//set scroll-snap-type according to scroll direction
document.documentElement.style.scrollSnapType = down ? "y mandatory" : "";
//save current scrollY position
previousScrollY = window.scrollY;
});body {
margin: 0;
}
section {
font-family: sans-serif;
font-size: 12ch;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: start;
}<section>
<h1>Hello!</h1>
</section>
<section>
<h1>Toodles~</h1>
</section>
<section>
<h1>Boodles~</h1>
</section>| 归档时间： |
|
| 查看次数： |
2662 次 |
| 最近记录： |