Виявити, чи користувач прокручує


85

Як я можу визначити в javascript, якщо користувач прокручує?


Ні, я хочу від іншої функції писати if(scolling). Це if(window.onscroll)те саме?
user1365010

Ви можете встановити scrollingв onscroll. (ps: ні, це не те саме)
Rocket Hazmat

3
Користувач ніколи не "прокручує". Існує лише дія прокрутки, а не стан прокрутки.
Кендалл Фрей,

1
@ user1365010: Д'О! Я про це не думав. Що саме ти намагаєшся зробити? Чому вам потрібно знати, чи прокручує користувач?
Rocket Hazmat

2
Цікаво. Я ніколи не перезавантажував сувій. Хочете докладно розробити?
Кендалл Фрей,

Відповіді:


87

це працює:

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: Що таке? Про що ти говориш? Вам потрібно додати більше деталей до запитання.
Ракета Хазмат,

6
@ user1365010 ця відповідь є (по суті) найкращим із можливих.
Метт Болл,

# FYI, здається, він не прокидається, коли контейнер прокручувався, body.scroll () працює, тому я додав обидва,
Сельва Ганапаті,

12

Ви щойно сказали 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'недостатньо добре? EDIT: Неважливо, я бачив ваш другий приклад.
Racket 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);

Дивіться приклад у прямому ефірі

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.