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

Question

我正在制作滚动页面上的动画。目前，我正在针对移动设备对其进行优化。

如果元素大于实际屏幕（例如大于移动屏幕），您可以在该元素中滚动（例如您可以在图像中水平滚动）。我怎样才能阻止它？我已经发现例如水平滚动图像时，实际的 x 滚动位置不会改变。

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

Answer 1

在父元素上将 overflow-x: 设置为 hidden 或 overflow: hidden 以隐藏将在父元素上的图像元素的滚动条视图 边框框。然后，您可以通过使用 position: absolute;.

将图像元素移动到 relative 附近的父元素

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

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

How to disable horizontal scrolling in an image?

html

javascript

css

mobile

web