位置仅固定水平，但允许使用 javascript 垂直滚动以获得视差效果答案

【问题标题】：position fixed only horizontal but allow vertical scroll using javascript for parallax effect位置仅固定水平，但允许使用 javascript 垂直滚动以获得视差效果
【发布时间】：2016-06-18 06:01:52
【问题描述】：

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

.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/

【问题讨论】：

您是想让颜色网格呈现水平还是只想在垂直滚动期间一直显示图像？
我希望图像在您垂直滚动时随页面移动，而不是固定在当前位置

标签： javascript jquery html css parallax

【解决方案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/

但这花了我大约一个小时:)。

谢谢！！

【讨论】：

我认为这是由于 jsFiddle 运行屏幕对齐问题。让我们在原始代码上试试这个并检查它是否工作正常。谢谢！！