Question

我在网页上有一个div，需要进行一些水平滚动。我正在寻找一种解决方案，一旦用户到达可滚动区域的末尾，滚动就会停止并且不会传播到页面级别，并导致浏览器开始在页面之间进行导航。

我可以找到很多防止完全滚动的示例，但在这种情况下没有。正确方向的任何提示将不胜感激。

请参阅下面的样本小提琴。在Safari和Chrome中，一旦用户一直向左滚动并继续滚动，浏览器就会开始向后导航页面。 https://jsfiddle.net/pphheerroonn/0g2zmrhu/

.container {
  width: 500px;
  padding: 100px, 0px;
  background: grey;
}

.outer-scroller {
  overflow-x: scroll;
}

.scroller {
  width: 1600px;
  height: 250px;
  background: white;
}

.box {
  width: 300px;
  height: 100%;
  margin-left: 15px;
  float: left;
  background: pink;
}

<div class="container">
  SCROLL ALL THE WAY LEFT ⬅️
  <div class="outer-scroller">
    <div class="scroller">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <!--scroller end-->
  </div>
  <!--outter-scroller end-->
  FIN
</div>
<!--container end-->

防止DIV中的水平滚动导航

0 个答案: