如何检测元素滚动的结束 [英] How to detect the end of an element scroll
问题描述
我正在尝试使自动滚动条向左滚动，然后当滚动条到达末尾时又回来了……现在的问题是，由于element.scrollWidth返回静态值，因此我无法检测到滚动的结束我猜是包括溢出部分在内的整个元素长度的总和.element.scrollLeft返回一个非静态值，该值根据屏幕宽度而变化，因为元素是响应式的.
这是到目前为止我尝试过的片段:
const slider = document.getElementById('container');
var i = 1;
setInterval(() => {
i === slider.scrollWidth ? (i = -i , i++) : i++
slider.scrollBy(i / Math.abs(i), 0);
}, 5)
#container {
height: 100px;
width: 300px;
overflow-x: scroll;
border: 1px solid black;
}
#slider {
position: relative;
width: 1000px;
height: 100%;
background-color: green;
}
#start,
#end {
position: absolute;
height: 100%;
width: 10px;
background-color: white
}
#start {
left: 1%;
}
#end {
right: 1%;
}
<div id="container">
<div id="slider">
<div id="start"></div>
<span id="end"></span>
</div>
</div>
注意:我希望滚动条到达终点时准确地向后滚动
啊！我最近才遇到同样的问题，花了我很长时间才能得到我想要的简洁答案！
这是我的代码及其解释.
首先，在我的默认页面中，它会从外部文件中调用脚本.
这并不是每个人都需要的，但是如果您想将所有自动滚动片段保存在不同的文件中以使其看起来更整洁，这就是您要执行的操作(并调用它).
$(document).ready(function () {
$.getScript('/scripts/scrollableLogic.js', function () {
var $scrollSpeed = 400000;
var $interval = 400000;
initialiseAutoScroll($scrollSpeed, $interval);
});
});
其次，在我的外部文件中，我开始了所有自动滚动.
注意:我大约有4个div独立滚动，它们都具有悬停选择器，它们会停止滚动并彼此独立地恢复.如果这是您面临的另一个问题，我的代码可能会提供一些有关如何执行此操作的见解-如果不是，请提出问题，我将提供更多代码.同样，我知道在此代码示例中仍有一些变量未使用-这是因为我的代码比此处的功能大得多/复杂得多！
function initialiseAutoScroll(speed, interval) {
//Auto scroll my exampleDiv
$('#exampleDivName')
.animate({
scrollTop: $('#exampleDivName').get(0).scrollHeight
}, { duration: speed});
//Detect when scrolling the div
$('#exampleDivName').bind('scroll', checkScrollPosition);
};
第三，每次div滚动时触发该事件，当它位于底部时，执行一件事.
function checkScrollPosition(div) {
var $div = $(div.currentTarget);
//Allows for margin of error in borders + scroll
if (($($div).get(0).scrollHeight - $($div).scrollTop() == $($div).innerHeight()) ||
$($div).get(0).scrollHeight - $($div).scrollTop() <= ($($div).innerHeight() +
10)) {
//Perform logic to restart your scrolling or do whatever you want
}
}
}
如果其中任何一项似乎没有道理，请询问！
作为剩余评论的更新: 我要做的就是每次div滚动时都有一个事件侦听器.在该侦听器中，调用了一个函数.此功能查看div的当前滚动位置及其高度，如果位于底部，则可以执行操作.
请参阅定义:
scrollHeight 属性返回以像素为单位的元素的整个高度，包括填充，但不包括边框，滚动条或边距.
Element.scrollTop 属性获取或设置元素内容垂直滚动的像素数.
innerheight -当前为匹配元素集中的第一个元素计算的内部高度(包括填充，但不包括边框)或设置每个匹配元素的内部高度
如果您有快速的研究试图找到与这些功能等效的Javascript，并将其弹出到等效功能中，那么它应该是一个不错的起点.
如果您在进一步研究后仍然遇到问题，我将尝试为您模拟Javascript示例！
Im trying to make an automatic scroll bar scrolling to left then when the scrollbar reaches the end it comes back ... now the issue is that im not able to detect the end of the scrolling since element.scrollWidth returns a static value of the whole element length including the overflowed part i guess ... and element.scrollLeft returns a non-static value that changes dependently on the screen width since the element is responsive .
here is a snippet of what i've tried so far :
const slider = document.getElementById('container');
var i = 1;
setInterval(() => {
i === slider.scrollWidth ? (i = -i , i++) : i++
slider.scrollBy(i / Math.abs(i), 0);
}, 5)
#container {
height: 100px;
width: 300px;
overflow-x: scroll;
border: 1px solid black;
}
#slider {
position: relative;
width: 1000px;
height: 100%;
background-color: green;
}
#start,
#end {
position: absolute;
height: 100%;
width: 10px;
background-color: white
}
#start {
left: 1%;
}
#end {
right: 1%;
}
<div id="container">
<div id="slider">
<div id="start"></div>
<span id="end"></span>
</div>
</div>
NB : i want the scrollbar to turn back exactly when it reaches the end
Aha! I literally had the same issue just recently, took me forever to get the concise answer I wanted!
Here is vaguely my code and an explanation of how it works.
Firstly, in my default page it calls a script from an external file.
This won't be relevant for everyone, but if you want to keep all your auto-scroll crud in a different file to make it look neater, this is how you do it (and call it).
$(document).ready(function () {
$.getScript('/scripts/scrollableLogic.js', function () {
var $scrollSpeed = 400000;
var $interval = 400000;
initialiseAutoScroll($scrollSpeed, $interval);
});
});
Secondly, in my external file, I start all my autoscrolling.
Note: I have about 4 divs scrolling independantly, they all have hover selectors that stop scrolling and resume independently of one another. My code might give some insight into how to do this if that's another issue you're facing - if not, just ask and I'll provide more code. Similarly, I know there are variables that remain unused in this code example - this is because my code is far larger / more complex than what's featured here!
function initialiseAutoScroll(speed, interval) {
//Auto scroll my exampleDiv
$('#exampleDivName')
.animate({
scrollTop: $('#exampleDivName').get(0).scrollHeight
}, { duration: speed});
//Detect when scrolling the div
$('#exampleDivName').bind('scroll', checkScrollPosition);
};
Thirdly, fire the event everytime the div is scrolled, when it's at the bottom, do a thing.
function checkScrollPosition(div) {
var $div = $(div.currentTarget);
//Allows for margin of error in borders + scroll
if (($($div).get(0).scrollHeight - $($div).scrollTop() == $($div).innerHeight()) ||
$($div).get(0).scrollHeight - $($div).scrollTop() <= ($($div).innerHeight() +
10)) {
//Perform logic to restart your scrolling or do whatever you want
}
}
}
If any of this doesn't appear to make sense, please ask!
As an update for the comment left: All I'm doing is having an event listener for every time the div is scrolled. In side that listener, a function is called. This function looks at the current scroll position of the div as well as it's height, if it's at the bottom, it does a thing.
See definitions:
scrollHeight property returns the entire height of an element in pixels, including padding, but not the border, scrollbar or margin.
Element.scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically.
innerheight - current computed inner height (including padding but not border) for the first element in the set of matched elements or set the inner height of every matched element
If you have a quick research at trying to find the Javascript equivalent of these functions, and just pop them into your equivalent function, it should be a good place to start.
If you still have issues after further research, I'll attempt to mock up a Javascript sample for you!
这篇关于如何检测元素滚动的结束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
