Question

尝试在移动设备上打开上面的示例，或者在jsfildle的结果中，单击并向右拖动。在移动设备中，当您向右滑动时，它会断开。

.parallax {
    overflow-x: hidden;
    overflow-y: auto;
}

我也试过user-scalable=no，但问题仍然存在。

Answer 1

再一次，但现在有了解决方案..好心的问题在于您的

  .parallax__layer--back {
    -webkit-transform: translateZ(-300px) scale(2);
    transform: translateZ(-300px) scale(2);
    z-index: 3;
  }

  .parallax__layer--deep {
    -webkit-transform: translateZ(-600px) scale(3);
    transform: translateZ(-600px) scale(3);
    z-index: 2;
  }

特别是 scale（）使您的元素更宽，因此它超出了视口

溢出：隐藏不适用于移动设备，尤其是当您使用用户可滚动时：no / 0

移动设备在元视口中跳过或溢出或此commant（不知道为什么）

Eighter方式你有3个解决方案：

重建网站并在没有规模（）的情况下完成效果，并且仅用于完美

禁用滚动，但遗憾的是纵向和横向都是如此不能移动

    <script>
        document.body.addEventListener('touchstart', function(e){ e.preventDefault(); });
    </script>

您可以使用锤子或触摸屏来确定要禁用的轴

http://hammerjs.github.io/touch-action/

在这种情况下就是这样 JSFIDDLE

http://labs.rampinteractive.co.uk/touchSwipe/demos/

Chrome纯CSS视差的横向问题

1 个答案: