"overflow-x: auto" 不向左滚动

Question

我有以下代码：

#container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 22px;
  gap: 22px;
  overflow-x: auto;
}

<div id="container">
  <image src="https://www.perpetuum.eu/sites/perpetuum.eu/files/inline-images/grid-line.jpg" width="888" />
  <div>This image has a fixed width (and thus also its height). This image will not change as a function of the window size. In a mobile it may overflow.</div>
</div>

当出现溢出时，图像会保持在中央（这是我想要的）。但是滚动条只向右移动，所以看不到左边的部分。我怎样才能获得双向卷轴？否则，如何仅在溢出时将对齐方式更改为左对齐？

Answer 1

您不能双向滚动。但是您可以为图像添加边距，溢出将按预期工作。

img {
   margin: 0 auto;
}

"overflow-x: auto" 不向左滚动

"overflow-x: auto" does not scroll to the left

html

css

overflow

alignment