Question

在我的CSS视差中，我将<body>和<html>设置如下：

@supports (perspective: 1px) { /* The parallax atmosphere */
  html {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    scroll-behavior: smooth;
  }
  html > body {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: none;
    perspective: 1px;
    transform-style: preserve-3d;
    transform: translateZ(0);
    scroll-behavior: smooth;
  }
  html > body:after {
    content: "";
    display: block;
    clear: both;
  }
}

以下是其中（重要部分）视差层之一的CSS示例：

#aF-background-layer-1 {
  position: absolute;
  z-index: -1;
  overflow: hidden; /* Because it wraps an SVG */
}
@supports (perspective: 1px) {
  #aF-background-layer-1 {
    -webkit-transform: translateZ(-72px) scale(73);
    transform: translateZ(-72px) scale(73);
    will-change: transform;
  }
}

还有更多的CSS，但这只是为各层提供了尺寸，颜色，如何处理内部SVG的方法，并且它们的工作原理都非常漂亮。问题是当您滚动到页面底部时。在Chrome中，当您到达<body>的底部时，滚动停止。在FireFox和Safari（不确定IE / Edge或其他浏览器）中，滚动直到您到达所有元素的底部才停止。如果其中任何一个元素相距很远（滚动时移动非常缓慢），则这可以持续相当长的距离。所以问题是：

如何在<body>的结尾处停止滚动？

我不能仅在overflow: hidden;上使用<body>，因为页面甚至不会滚动。我更喜欢使用CSS，而不是JS。这是一个可以玩的沙箱：

https://codepen.io/joerhoney/pen/yRmeOL

Answer 1

在您的html头中，将高度指定为200vh：

<head>
    <meta name="viewport" content="width=device-width" height="200vh" user-scalable="yes" initial-scale="1.0">
</head>

更改CSS中HTML和主体的高度：

html {
    height: 200vh;
}

html > body {
    height: 200vh;
}

我不确定这些是您想要的数字，但是您需要它们匹配。

https://codepen.io/carolmckayau/pen/EdqwmL

如何防止CSS 3D转换的元素扩展页面？

1 个答案: