javascript - 位置固定仅水平但允许垂直滚动使用 javascript 的视差效果

Question

我有一个视差/滑动效果，我试图通过将固定背景图像附加到左右动画的容器来实现，但我还需要能够让图像随页面垂直滚动。如何在允许垂直滚动的情况下实现这种视觉效果？

.project-ten__container {
 position: relative;
 display: inline-block;
 width: 20vw;
 height: 100vh;
 vertical-align: top;
 background-attachment: fixed;
 background-position: center;
 background-repeat: no-repeat;
 overflow: hidden;
 }

确保将鼠标悬停在 jFiddle 中的元素上以获得视差/滑动效果，并在 jfiddle 上向下滚动以查看问题 https://jsfiddle.net/pd37cmey/2/

Answer 1

.project-ten__container {
    position: relative;
    left: -10%;
    display: inline-block;
    width: 20vw;
    height: 100vh;
    vertical-align: top;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: 30%;
    -moz-background-size: 30%;
    background-size: 30%;
    overflow: hidden;
    -webkit-transition: opacity 0.1s ease;
    transition: opacity 0.1s ease;
  }

https://jsfiddle.net/manishghec/0c6q05yu/3/

然而，这花了我大约一个小时 :)。

谢谢!!