Question

我有一个包含多个子元素的 div元素（＆＃34; #parent＆＃34;）（＆＃34; .item＆＃34;）。我想在一个方向（左 OR 右）中启用滚动父元素。否则什么都不应该发生。

请参阅我的代码：

＆＃13;

$("#parent").scroll(function() {
    // >>> scroll event
    // >>> console.log("SCROLLED " + new Date().getMilliseconds())
})

＆＃13;

#container {
  position: absolute;
  width: 100%;
  height: 100%;
}

#parent {
  position: relative;
  width: 90%;
  height: 40%;
  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;
}

＆＃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;

所以对我的问题：我想禁用将元素滚动到右侧（向后）。我想将项目的滚动设置为左侧（向前）。

如何使用jQuery实现此方法？非常感谢任何帮助。提前致谢！

Answer 1

以下代码应该执行¹。

的工作

previousX存储元素在X轴上滚动到的最后位置。

当滚动事件触发时，newX被设置为scrollLeft()值（这将返回元素从其最左侧滚动的距离，以像素为单位）。

如果此值更大而不是previousX，则它们已向右滚动，因此我们允许滚动，并将previousX更新为新的x值。
如果值小于previousX，则它们向右滚动 - 因此我们需要取消滚动。为此，我们可以再次使用scrollLeft()函数 - 但这一次，我们为它提供了一个值 - 这允许我们设置滚动位置;而不是检索它。通过将其设置为previousX，我们可以阻止滚动。
请注意，如果值相等，我们什么都不做。

let previousX = -1;

$("#parent").scroll(function(e){
    let newX = $("#parent").scrollLeft();
    if (newX>previousX) {
        previousX = newX;
    }
    else if (newX<previousX) {
        $("#parent").scrollLeft(previousX);
    }
})

#container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow:hidden;
}

#parent {
  position: relative;
  width: 90%;
  height: 40%;
  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;
}

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

¹：不幸的是，当我将它与我的Magic Trackpad一起使用时似乎根本不起作用 - 但是当拖动滚动条时它工作得很好。我没有在触摸屏设备上测试它/ Windows /使用适当的鼠标＆amp;滚轮，所以我不知道它在这些情况下的表现如何。绝对值得你做一些正确的测试/改进这个代码，因为它可能不适用于所有情况，甚至捕获所有可能的滚动事件。

如何禁用向左滚动？

1 个答案: