有没有办法在页面的某一部分制作固定背景？

Question

如您所知，后台附件不适用于移动设备。对于桌面，我使用它，但对于 Android 和 IOS，我不知道应该如何创建视差效果。

我考虑过position:fixed，但是overflow:hidden也根本不起作用，因为对象会附加到视口。

我之前也尝试过使用 background-position-y 通过 JS 来实现，它的值是 window.scrollY，尽管它也很滞后（定位有延迟，有时背景会晃动）。

JS：

function parallax() {
    document.body.style = `--check: ${window.scrollY}px`;
    requestAnimationFrame(parallax)
}
requestAnimationFrame(parallax);

CSS：

background-position-y: var(--check);

我不知道该怎么办。请你帮助我好吗？ 预先感谢您！

Answer 1

由于移动浏览器处理滚动和渲染的方式，在移动设备上创建视差效果可能有点棘手。然而，我根据我的要求使用了一些策略来达到类似的效果。另请注意，由于移动设备处理 CSS 转换和滚动的方式，以下方法可能无法在所有移动设备上完美运行。如果您的目标设备范围广泛，您可能需要结合使用不同的技术才能获得最佳结果。

方法一：

该方法是使用 JavaScript 在用户滚动时调整背景图像的位置。然而，这种方法可能会消耗大量性能，并且可能会导致移动设备上的滚动出现一些滞后。

方法2

此方法将 CSS 视为中心，即使用 transform 属性 以与其余内容不同的速度移动背景图像。这种方法比使用 JavaScript 更有效，但它可能无法在所有移动设备上完美运行（不过值得一试）。

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  transform: translateZ(-1px) scale(2);

<div class="parallax">
<!-- BEM methodology for classnames -->
  <div class="parallax__layer parallax__layer--back">
    <!-- Your BG image -->
  </div>
  <div class="parallax__layer parallax__layer--base">
    <!-- Your content -->
  </div>
</div>