如何防止滚动方向？

Question

注意：此问题是更新至How to disable scroll left?。

我希望得到一个可以滚动到一个方向

的div元素（在我的情况下只有＆＃34;右＆＃34;）。向左滚动应该取消。

我已经开发了一些jQuery代码，应该能够防止在不需要的方向滚动，到目前为止正在工作！

但是我遇到了一些问题，因为滚动到被阻止的方向显然看起来超级粘性＆amp;丑。

＆＃13;

＆＃13;

let value = $("#parent").scrollLeft()

$("#parent").scroll(function(e) {
  let direction = (this.scrollLeft > value) ? 'right' : ((this.scrollLeft === value) ? false : 'left');
  console.log(direction)

  if (direction == "left") {
    this.scrollLeft = value;
    e.preventDefault();
    e.stopPropagation();
  }

  value = $("#parent").scrollLeft()
})

＆＃13;

#container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#parent {
  position: relative;
  width: 90%;
  height: 80%;
  overflow-y: hidden;
  overflow-x: scroll;
  white-space: nowrap;
  background: red;
}

.child {
  display: inline-block;
  position: relative;
  margin-left: 3%;
  width: 40px;
  height: 40px;
  background: gray;
}

.as-console-wrapper {
   height: 20px!important;
}
.as-console-row {
   background: green!important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child">9</div>
    <div class="child">10</div>
    <div class="child">12</div>
    <div class="child">13</div>
    <div class="child">14</div>
    <div class="child">15</div>
    <div class="child">16</div>
    <div class="child">17</div>
    <div class="child">18</div>
    <div class="child">19</div>
    <div class="child">20</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

看看：向后滚动看起来非常难看：

如何解决这个问题？

0 个答案:

没有答案