I got a div 元素 ("#parent") 包含多个子元素 (".item")。我想启用滚动父元素一个方向 (left OR正确的）。否则什么都不会发生。
看我的代码：
$("#parent").scroll(function() {
// >>> scroll event
// >>> console.log("SCROLLED " + new Date().getMilliseconds())
})
#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;
}
<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>
所以我的问题是：我想禁用将元素滚动到右侧（向后）。我只想将项目滚动到左侧（向前）。
我如何使用 jQuery 来实现这个方法？任何帮助将不胜感激。提前致谢！
The following code should do the job1.
previousX存储元素在 X 轴上滚动到的最后位置。
当滚动事件触发时，newX被设置为scrollLeft()值（这返回元素从最左侧滚动的距离，以像素为单位）。
如果这个值是greater than previousX，然后它们已滚动到右侧，因此我们允许滚动并更新previousX到新的 x 值。
如果值为lesser than previousX，它们已经滚动到右侧 - 所以我们需要取消滚动。为此，我们可以使用scrollLeft()再次运行 - 但这一次，我们为其提供一个值 - 这允许我们设置滚动位置；而不是检索它。通过将其设置为previousX，我们可以阻止滚动。
请注意，如果该值为equal，我们什么都不做。
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>
1: Unfortunately, it doesn't seem to work at all when I use it with my Magic Trackpad - but when dragging the scroll bars it works just fine. I haven't tested it on a touch-screen device / Windows / using a proper mouse & scroll wheel, so I don't know how it behaves in those cases either. It would definitely be worth you doing some proper testing / improving this code, as it probably will not work in all cases, or even catch all possible scroll events.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
