Question

我想实现一个布局，默认情况下，用户可以在其容器中从左到右，从右到左滚动子元素。现在如果让孩子比容器更宽，并将溢出设置为overflow: scroll我可以将子div向左滚动。

但我希望初始状态如下：

这样用户最初可以向任一方向滚动。

这是一封html电子邮件，因此可能没有javascript。这也是针对移动触控设备。

此图片的代码如下：

<!DOCTYPE html>
<meta name="viewport" content="width=device-width;initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

<style>
  .container{
  width: 400px;
  border: 3px solid red;
  height: 400px;
  margin: 0 auto;
  overflow: initial;
}

.child{
  position: relative;
  border: 2px dotted green;
  width: 800px;
  height: 200px;
  margin-left: -200px;
}
</style>


<div class="container">
  <div class="child">
    <img src="https://illuminatecosmeticmedicine.com.au/wp-content/uploads/2017/06/Blank-Profile.jpg" width="200px" style="margin-left: 300px" alt="">
  </div>
</div>

但是，如果我将容器的溢出更改为scroll或auto它仍然只允许我将子项的右侧部分滚动到视图中，而不是左侧部分。我怎样才能做到这一点？

双向水平滚动html / css

0 个答案: