时间戳

首页 > 解决方案 > 如何防止 CSS 3D 转换的元素扩展页面？

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

问题描述

在我的 CSS 视差中，我将<body>and设置<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

标签： css

解决方案

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

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

更改 CSS 中 html 和 body 的高度：

html {
    height: 200vh;
}

html > body {
    height: 200vh;
}

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

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

推荐阅读