纯 css 视差透视不适用于 html 元素

编程问答 2022-05-30

问题描述

无法使 html 元素的透视属性工作。我想创建一个整页视差滚动效果，但它似乎只适用于产生很多问题的 body 元素。如果我使用 body 滚动页面，那么（默认行为：Chrome 和 Firefox 将垂直滚动条放在 html 元素上）window.onscroll 事件停止触发。如果我尝试放置 html 元素，则视差效果将停止工作。

更正：此解决方案仅适用于基于 chrome 的浏览器，我写了这个问题，因为它似乎不适用于 Firefox。

window.onscroll = function() {console.log('onscroll')}
    html {
      perspective: 1000px;
      position: relative;
      overflow: hidden;
    }

    body {
      height: 100vh;
      overflow: auto;
      transform-style: preserve-3d
    }
    .section {
      position: relative;
      height: 100vh;
      display: block;
      color: white;
      transform-style: preserve-3d;
    }

    .wrapper {
      transform-style: preserve-3d
    }

    .parallax::after {
      content: " ";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      transform: translateZ(-500px) scale(2);
      background-size: 100%;
      z-index: -1;
    }

    .static {
      background: red;
    }

    .bg1::after {
      background-image: url('https://placekitten.com/g/900/700');
    }

    .bg2::after {
      background-image: url('https://placekitten.com/g/800/600');
    }
<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <main class="wrapper">
    <section class="section parallax bg1">
      <h1>placekitten</h1>
    </section>
    <section class="section static">
      <h1>Static</h1>
    </section>
    <section class="section parallax bg2">
      <h1>placekitten</h1>
    </section>
  </main>

</body>

</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

firefoxfirefoxgoogle-chromeparallaxperspective