CSS Scroll Snap 允许浏览器捕捉滚动到容器中的元素。要将相同的逻辑应用于垂直页面滚动,我发现它必须应用于<body>
而不是<html>
(见下文)。这不是一个主要问题,但它确实有效地创建了一个滚动区域<body>
而不是使用窗口滚动。
虽然这看起来不错,但它有一些副作用:
- javascript 中不能再使用窗口滚动函数
- Apple 浏览器上的橡皮筋效果响应速度较慢,并且在 Mac 上的 Chrome 中不存在。
我希望它尽可能地显得原生,因此唯一的结论是将其应用到<html>
而不是<body>
。然而,以这种方式应用它会阻止它发挥作用。如果您将其应用于两者,它将在 Safari 中正确呈现,但在 Chrome 和 Firefox 中仍然损坏。
问题不是因为<body>
在父元素和子元素之间创建分隔,就像另一个元素一样<div>
添加到层次结构中它仍然可以正常运行。
这是功能代码,但适用于<body>
而不是<html>
.
<html>
<body>
<div class="extra_parent">
<div class="child">ONE</div>
<div class="child">TWO</div>
<div class="child">THREE etc..</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
html {
height: 100vh;
overflow: hidden
}
.child {
position: relative;
height: 80vh;
font-size: 100px;
text-align: center;
line-height: 80vh;
color: #000;
scroll-snap-align: end;
}
解决小提琴:https://jsfiddle.net/u8tsjven/ https://jsfiddle.net/u8tsjven/
你(们)能做到.extra_parent
通过添加以下规则不干扰滚动捕捉:
.extra_parent {
display: contents;
}
https://caniuse.com/css-display-contents https://caniuse.com/css-display-contents
display:contents 导致元素的子元素显示为元素父元素的直接子元素,而忽略元素本身。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)