如何禁用图像中的水平滚动?

Question

我正在做一个滚动动画页面。目前，我正在为移动设备优化它。

如果一个元素比实际屏幕大(例如比手机屏幕大)，你可以在该元素中滚动(例如你可以在图像中水平滚动)。我怎么能阻止它呢?我已经发现，例如，实际的x-scroll-position不改变时，滚动通过一个图像水平。

由于动画的原因，我无法将任何元素的位置设置为相对位置。Overflow-x: hidden在我的情况下不起作用。

Answer 1

将父元素的overflow-x:设置为hidden或overflow: hidden，以隐藏位于父元素上的图像元素的滚动条视图border-box。然后你可以移动你的图像元素周围的relative到父元素使用position: absolute;定位它。

.parent {
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}
.parent img {
position: absolute;
left: -220px;
top: -30px;
}

<div class="parent">
<img src="https://cdn.pixabay.com/photo/2017/06/05/18/22/nature-2374798_640.jpg">
</div>
<img src="https://cdn.pixabay.com/photo/2017/06/05/18/22/nature-2374798_640.jpg">