Определить, прокручивает ли пользователь

88

Как я могу определить в javascript, если пользователь прокручивает?

user1365010
источник
Нет, хочу из другой функции написать if(scolling). То if(window.onscroll)же самое?
user1365010
Вы можете установить scrollingв onscroll. (пс: нет, это не то же самое)
Rocket Hazmat
3
Пользователь никогда не «прокручивает». Есть только действие прокрутки, а не состояние прокрутки.
Кендалл Фрей
1
@ user1365010: Ой! Я не думал об этом. Что именно ты пытаешься сделать? Зачем нужно знать, прокручивает ли пользователь?
Rocket Hazmat
2
Интересно. Я ни разу не перезагружал свиток. Хотите уточнить?
Кендалл Фрей

Ответы:

88

это работает:

window.onscroll = function (e) {  
// called when the window is scrolled.  
} 

редактировать:

вы сказали, что это функция в TimeInterval ..
Попробуйте сделать это так:

userHasScrolled = false;
window.onscroll = function (e)
{
    userHasScrolled = true;
}

затем внутри вашего интервала вставьте это:

if(userHasScrolled)
{
//do your code here
userHasScrolled = false;
}
Вампи Дриссен
источник
Но это функция в setInterval!
user1365010
4
@ user1365010: Что? О чем ты говоришь? Вам нужно добавить больше деталей к вопросу.
Rocket Hazmat
6
@ user1365010, этот ответ (по сути) лучшее, что вы можете сделать.
Мэтт Болл
# К вашему сведению, при прокрутке контейнера не работает, body.scroll () работает, поэтому я добавил и то, и другое,
Сельва Ганапати,
11

Вы только что указали javascript в своих тегах, так что сообщение @Wampie Driessen может вам помочь.

Я также хочу внести свой вклад, поэтому вы можете использовать следующее при использовании jQuery, если вам это нужно.

 //Firefox
 $('#elem').bind('DOMMouseScroll', function(e){
     if(e.detail > 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

 //IE, Opera, Safari
 $('#elem').bind('mousewheel', function(e){
     if(e.wheelDelta< 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

Другой пример:

$(function(){
    var _top = $(window).scrollTop();
    var _direction;
    $(window).scroll(function(){
        var _cur_top = $(window).scrollTop();
        if(_top < _cur_top)
        {
            _direction = 'down';
        }
        else
        {
            _direction = 'up';
        }
        _top = _cur_top;
        console.log(_direction);
    });
});​
Оскар Хара
источник
2
Разве jQuery не должен абстрагироваться от различий между браузерами? Почему у вас есть методы для разных браузеров? Разве $('#elem').bind('scroll'не достаточно хорошо? РЕДАКТИРОВАТЬ: Неважно, я видел ваш второй пример.
Rocket Hazmat
1
нет ничего плохого в том, чтобы время от времени использовать небольшой собственный javascript.
AGDM
Вы не имеете в виду e.originalEvent.wheelDelta || e.originalEvent.detail?
JacobRossDev
2
ПРЕДУПРЕЖДЕНИЕ. События колеса в этом ответе являются нестандартными и устаревшими. Воспользуйтесь wheelсобытием.
Александр О'Мара
Я не тестировал это, но, согласно MDN, DOMMouseScroll не поддерживается в большинстве браузеров developer.mozilla.org/en-US/docs/Web/Events/DOMMouseScroll
Лирон Яхдав
6
window.addEventListener("scroll",function(){
    window.lastScrollTime = new Date().getTime()
});
function is_scrolling() {
    return window.lastScrollTime && new Date().getTime() < window.lastScrollTime + 500
}

Измените 500 на количество миллисекунд после последнего события прокрутки, когда вы считаете, что пользователь «больше не прокручивает».

( addEventListenerлучше, чем onScrollпотому, что первый может хорошо сосуществовать с любым другим используемым кодом onScroll.)

Сайлас С. Браун
источник
0

Используйте интервал для проверки

Вы можете установить интервал, чтобы проверять, прокрутил ли пользователь, а затем сделайте что-нибудь соответственно.

Позаимствовано у великого Джона Ресига в его статье .

Пример:

    let didScroll = false;

    window.onscroll = () => didScroll = true;

    setInterval(() => {
        if ( didScroll ) {
            didScroll = false;
            console.log('Someone scrolled me!')
        }
    }, 250);

Посмотреть живой пример

Hitautodestruct
источник