7

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/

4

0 回答 0