Question

CSS滚动捕捉允许浏览器将滚动捕捉捕捉到容器中的元素。为了对垂直页面滚动应用相同的逻辑，我发现必须将其应用于<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/

是否可以将CSS Scroll Snap应用于HTML标记而不是Body标记

0 个答案: