Question

这不可能吗？我正在使用CSS和HTML，有一个侧边栏，并且找到了使它固定的方法（根本不滚动），但我找不到能工作的视差示例。

我真的想避免使用JS。

<html container>
  <content>
    <left column>
      This content is very very long and goes for a long way down.
    </left column>
    <right column>
      This is the sidebar and is much shorter, so I want it to scroll slower than the main content.
    </right column>
  </content>
</html>

如果没有javascript，这是否有可能？

Answer 1

使用CSS3透视图确实可行。实际上，由于视差是由浏览器处理的，因此与使用JavaScript相比，视差可能会更平滑。缺点是较旧的浏览器将不支持它。

CSS3透视图涉及沿Z轴变换元素。较远的元素将滚动得更慢。因此，您将不会沿Z轴变换主要内容，从而使其以默认速度滚动，并且您将使侧边栏沿Z轴向下变换（可以说远离用户），从而滚动速度会变慢。

当您转换为Z轴时，侧栏会变得更小（如果向上移动，则更大），因为它离用户越远。您需要计算出正确的距离比例，然后应用该比例，使其以原始尺寸显示。

由于您未提供CSS，因此我无法保证此代码将与您当前的实现兼容。但这通常是这样的：

content {
    ...
    perspective: 1px;
    height: 100vh;
    overflow-x: hidden;
}
column {
    ...
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}
left {
    left: 0;
    transform: translateZ(0);
}
right {
    left: 50%;
    transform: translateZ(-1px) scale(2);
}

使用透视图和translateZ值，以原始大小显示的比例因子为1 +（translateZ * -1）/透视图。

在https://codepen.io/jla-/pen/NOGxpQ上找到了一个代码笔，它用较长的内容部分和较短，较慢的滚动边栏来演示这一点。

This article了解有关在CSS中实现视差效果的更多信息。

侧栏滚动速度比主要内容慢

1 个答案: