时间戳

首页 > 解决方案 > 滚动速度比主要内容慢的侧边栏

javascript - 滚动速度比主要内容慢的侧边栏

问题描述

这是不可能的吗？我正在使用 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，这甚至可能吗？

标签： javascripthtmlcss

解决方案

使用 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);
}

使用 perspective 和 translateZ 值，以原始大小显示的比例因子为 1 + (translateZ * -1) / perspective。

在https://codepen.io/jla-/pen/NOGxpQ中可以找到一个用长内容部分和更短、更慢的滚动侧边栏来演示这一点的 codepen 。

本文有更多关于在 CSS 中实现视差效果的信息。

推荐阅读