Как узнать, когда я прекратил прокручивать, используя Javascript?
Как узнать, когда я прекратил прокрутку?
Ответ 1
Вы можете добавить обработчик события для события scroll и запустить таймаут. Что-то вроде:
var timer = null;
$(window).addEventListener('scroll', function() {
if(timer !== null) {
clearTimeout(timer);
}
timer = setTimeout(function() {
// do something
}, 150);
}, false);
Это запустит тайм-аут и будет ждать 150 мс. Если в то же время произошло событие scroll, таймер будет прерван и будет создан новый. Если нет, функция будет выполнена. Вероятно, вам нужно настроить время.
Также обратите внимание, что IE использует другой способ подключения прослушивателей событий, это должно дать хорошее представление: quirksmode - Расширенные модели регистрации событий
Ответ 2
Нет события "Остановленная прокрутка". Если вы хотите что-то сделать после завершения прокрутки пользователя, вы можете установить таймер в событии "OnScroll". Если вы получаете еще одно событие "OnScroll", то reset таймер. Когда таймер, наконец, загорится, вы можете предположить, что прокрутка остановлена. Я думаю, 500 миллисекунд будет хорошей продолжительностью для начала.
Вот пример кода, который работает в IE и Chrome:
<html>
<body onscroll="bodyScroll();">
<script language="javascript">
var scrollTimer = -1;
function bodyScroll() {
document.body.style.backgroundColor = "white";
if (scrollTimer != -1)
clearTimeout(scrollTimer);
scrollTimer = window.setTimeout("scrollFinished()", 500);
}
function scrollFinished() {
document.body.style.backgroundColor = "red";
}
</script>
<div style="height:2000px;">
Scroll the page down. The page will turn red when the scrolling has finished.
</div>
</body>
</html>
Ответ 3
(function( $ ) {
$(function() {
var $output = $( "#output" ),
scrolling = "<span id='scrolling'>Scrolling</span>",
stopped = "<span id='stopped'>Stopped</span>";
$( window ).scroll(function() {
$output.html( scrolling );
clearTimeout( $.data( this, "scrollCheck" ) );
$.data( this, "scrollCheck", setTimeout(function() {
$output.html( stopped );
}, 250) );
});
});
})( jQuery );
======= → → Рабочий пример здесь
Ответ 4
Я сделал что-то вроде этого:
var scrollEvents = (function(document, $){
var d = {
scrolling: false,
scrollDirection : 'none',
scrollTop: 0,
eventRegister: {
scroll: [],
scrollToTop: [],
scrollToBottom: [],
scrollStarted: [],
scrollStopped: [],
scrollToTopStarted: [],
scrollToBottomStarted: []
},
getScrollTop: function(){
return d.scrollTop;
},
setScrollTop: function(y){
d.scrollTop = y;
},
isScrolling: function(){
return d.scrolling;
},
setScrolling: function(bool){
var oldVal = d.isScrolling();
d.scrolling = bool;
if(bool){
d.executeCallbacks('scroll');
if(oldVal !== bool){
d.executeCallbacks('scrollStarted');
}
}else{
d.executeCallbacks('scrollStopped');
}
},
getScrollDirection : function(){
return d.scrollDirection;
},
setScrollDirection : function(direction){
var oldDirection = d.getScrollDirection();
d.scrollDirection = direction;
if(direction === 'UP'){
d.executeCallbacks('scrollToTop');
if(direction !== oldDirection){
d.executeCallbacks('scrollToTopStarted');
}
}else if(direction === 'DOWN'){
d.executeCallbacks('scrollToBottom');
if(direction !== oldDirection){
d.executeCallbacks('scrollToBottomStarted');
}
}
},
init : function(){
d.setScrollTop($(document).scrollTop());
var timer = null;
$(window).scroll(function(){
d.setScrolling(true);
var x = d.getScrollTop();
setTimeout(function(){
var y = $(document).scrollTop();
d.setScrollTop(y);
if(x > y){
d.setScrollDirection('UP');
}else{
d.setScrollDirection('DOWN');
}
}, 100);
if(timer !== 'undefined' && timer !== null){
clearTimeout(timer);
}
timer = setTimeout(function(){
d.setScrolling(false);
d.setScrollDirection('NONE');
}, 200);
});
},
registerEvents : function(eventName, callback){
if(typeof eventName !== 'undefined' && typeof callback === 'function' && typeof d.eventRegister[eventName] !== 'undefined'){
d.eventRegister[eventName].push(callback);
}
},
executeCallbacks: function(eventName){
var callabacks = d.eventRegister[eventName];
for(var k in callabacks){
if(callabacks.hasOwnProperty(k)){
callabacks[k](d.getScrollTop());
}
}
}
};
return d;
})(document, $);
код доступен здесь: documentScrollEvents
Ответ 5
Незначительное обновление в вашем ответе. Используйте функцию mouseover и out.
$(document).ready(function() {
function ticker() {
$('#ticker li:first').slideUp(function() {
$(this).appendTo($('#ticker')).slideDown();
});
}
var ticke= setInterval(function(){
ticker();
}, 3000);
$('#ticker li').mouseover(function() {
clearInterval(ticke);
}).mouseout(function() {
ticke= setInterval(function(){ ticker(); }, 3000);
});
});
Ответ 6
Я тоже пытался добавить свойство display: block для социальных иконок, которые ранее были скрыты в событии прокрутки, а затем снова скрылись через 2 секунды. Но
У меня тоже была та же проблема, что и у моего кода для тайм-аута после первой прокрутки, который запускался автоматически, и у меня не было идеи сброса тайм-аута. Поскольку у него не было надлежащей функции сброса. Но после того, как я увидел идею Дэвида по этому вопросу, я смог сбросить тайм-аут, даже если кто-то снова прокрутил его, прежде чем фактически завершить предыдущий тайм-аут.
-
код проблемы, показанный ниже, прежде чем решить
$(window).scroll(function(){ setTimeout(function(){ $('.fixed-class').slideUp('slow'); },2000); });
-
отредактированный и рабочий код с таймером сброса, если следующая прокрутка происходит до 2с
var timer=null; $(window).scroll(function(){ $('.fixed-class').css("display", "block"); if(timer !== null) { clearTimeout(timer);
} timer=setTimeout(function(){ $('.fixed-class').slideUp('slow'); },2000);});
Мой рабочий код вызовет скрытое разделение класса с именем 'fixed-class', которое будет отображаться в блоке при каждой прокрутке. С начала последней прокрутки таймер отсчитает 2 секунды, а затем снова переключит отображение с блока на скрытый.