Визначте, чи створив користувач подію прокрутки

Question 1

Чи можна сказати, чи відбулася подія прокрутки браузером чи користувачем? Зокрема, під час використання кнопки "Назад" браузер може перейти до останньої відомої позиції прокрутки. Якщо я прив'язую подію прокрутки, як я можу зрозуміти, чи це було спричинено користувачем або браузером?

$(document).scroll( function(){ 
    //who did this?!
});

Я бачу три типи ситуацій, які викликають прокрутку в браузері.

Користувач виконує певні дії. Наприклад, використовує коліщатко миші, клавіші зі стрілками, клавіші сторінки вгору / вниз, клавіші додому / кінця.
Браузер прокручується автоматично. Наприклад, при використанні кнопки "Назад" у вашому браузері вона автоматично перейде до останньої відомої позиції прокрутки.
Прокрутки Javascript. Наприклад, element.scrollTo(x,y).

Question 2

На жаль, немає прямого способу сказати це.

Я б сказав, якщо ви зможете перепроектувати свою програму так, щоб вона не залежала від цього типу потоку, перейдіть до цього.

Якщо ні, то обхідне рішення, яке я можу придумати, - це відстежувати ініційовані користувачем сувої та перевіряти, чи не прокручував браузер чи користувач.

Ось приклад, який я зібрав, який робить це досить добре (за винятком браузерів, в яких історія jQuery має проблеми).

Вам потрібно запустити це локально, щоб мати можливість повністю його перевірити (jsFiddle / jsbin погано підходить, оскільки вони iFrame вміст).

Ось тестові приклади, які я перевірив:

Завантаження сторінки - userScrollцеfalse
Прокрутка за допомогою миші / клавіатури - userScrollстаєtrue
Клацніть на посилання, щоб перейти на сторінку внизу - userScrollстаєfalse
Клацніть Назад / Вперед - userScrollстає false;

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
    <script type="text/javascript" src="https://raw.github.com/tkyk/jquery-history-plugin/master/jquery.history.js"></script> 
</head> 
<body> 
    <span> hello there </span><br/> 
    <a href="#bottom"> click here to go down </a> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <a name="bottom"> just sitting </a> 
</body> 
<script type="text/javascript"> 

var userScroll = false;     

function mouseEvent(e) { 
    userScroll = true; 
} 


$(function() { 

    // reset flag on back/forward 
    $.history.init(function(hash){ 
        userScroll = false; 
    }); 

    $(document).keydown(function(e) { 
        if(e.which == 33        // page up 
           || e.which == 34     // page dn 
           || e.which == 32     // spacebar
           || e.which == 38     // up 
           || e.which == 40     // down 
           || (e.ctrlKey && e.which == 36)     // ctrl + home 
           || (e.ctrlKey && e.which == 35)     // ctrl + end 
          ) { 
            userScroll = true; 
        } 
    }); 

    // detect user scroll through mouse
    // Mozilla/Webkit 
    if(window.addEventListener) {
        document.addEventListener('DOMMouseScroll', mouseEvent, false); 
    }

    //for IE/OPERA etc 
    document.onmousewheel = mouseEvent; 


    // to reset flag when named anchors are clicked
    $('a[href*=#]').click(function() { 
        userScroll = false;
    }); 

      // detect browser/user scroll
    $(document).scroll( function(){  
        console.log('Scroll initiated by ' + (userScroll == true ? "user" : "browser"));
    });
}); 
</script> 
</html>

Примітки:

Це не відстежує прокрутку, коли користувач перетягує смугу прокрутки за допомогою миші. До цього можна додати ще трохи коду, який я залишив для вас вправою.
event.keyCodes може відрізнятися залежно від ОС, тому вам, можливо, доведеться змінити це відповідно.

Сподіваюся, це допомагає!

Question 3

Замість того, щоб намагатися вловити всі події користувача, набагато простіше зробити навпаки і обробляти лише програмні події - і ігнорувати їх.

Наприклад, такий тип коду буде працювати:

// Element that needs to be scrolled
var myElement = document.getElementById('my-container');

// Flag to tell if the change was programmatic or by the user
var ignoreNextScrollEvent = false;

function setScrollTop(scrollTop) {
    ignoreNextScrollEvent = true;
    myElement.scrollTop = scrollTop
}

myElement.addEventListener('scroll', function() {
    if (ignoreNextScrollEvent) {
        // Ignore this event because it was done programmatically
        ignoreNextScrollEvent = false;
        return;
    }

    // Process user-initiated event here
});

Потім, коли ви телефонуєте setScrollTop(), подія прокрутки буде проігнорована, тоді як якщо користувач прокручує за допомогою миші, клавіатури або будь-яким іншим способом, подія буде оброблена.

Question 4

Наскільки я знаю, неможливо (без будь-якої роботи) визначити, коли подія прокрутки видається "користувачем" або іншими способами.

Ви можете спробувати (як згадували інші) зафіксувати події колеса миші, а потім, мабуть, спробувати вловити подію клавіатури на будь-яких клавішах, які можуть викликати прокрутку (стрілки, пробіл тощо), перевіряючи, який елемент зараз фокусується, оскільки ви, наприклад, не можете прокручувати за допомогою клавіші зі стрілками під час набору тексту у полі введення. Взагалі це був би складний і безладний сценарій.

Залежно від ситуації, з якою ви маєте справу, я міг би здогадатися "повернути логіку", і замість виявлення виданих користувачем подій прокрутки просто підключіться до будь-яких прокруток, зроблених програмно, і обробляйте будь-які події прокрутки, не зроблені вашим кодом, як користувачеві. Як я вже сказав, це залежить від ситуації та того, що ви намагаєтесь досягти.

Question 5

Так, це можливо на 100%. Я зараз використовую це в додатку, де IE не є вимогою - клієнт стикається лише. Коли моя програма Backbone ініціює анімацію, в якій змінено прокручування - прокрутка відбувається, але не запускає ці захоплення подій. Це тестується в останніх версіях FF, Safari та Chrome.

$('html, body').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(evt) {
  // detect only user initiated, not by an .animate though
    if (evt.type === 'DOMMouseScroll' || evt.type === 'keyup' || evt.type === 'mousewheel') {
    // up
    if (evt.originalEvent.detail < 0 || (evt.originalEvent.wheelDelta && evt.originalEvent.wheelDelta > 0)) { 
    // down.
    } else if (evt.originalEvent.detail > 0 || (evt.originalEvent.wheelDelta && evt.originalEvent.wheelDelta < 0)) { 
  }
}
});

Question 6

Спробуйте замість цього скористатися подіями Mousewheel та DOMMouseScroll. Див. Http://www.quirksmode.org/dom/events/scroll.html

Question 7

Ви можете перевірити положення прокрутки на готовому. Коли ви запускаєте подію при прокрутці, переконайтеся, що положення прокрутки відрізняється від того, яке було при завантаженні сторінки. Нарешті, обов’язково видаліть збережене значення після прокрутки сторінки.

$(function () {
    var loadScrollTop = ($(document).scrollTop() > 0 ? $(document).scrollTop() : null);
    $(document).scroll(function (e) {
        if ( $(document).scrollTop() !== loadScrollTop) {
            // scroll code here!
        }
        loadScrollTop = null;
    });
});

Question 8

Стосовно:

Зокрема, під час використання кнопки "Назад" браузер може перейти до останньої відомої позиції прокрутки.

Це спрацьовує дуже скоро, після відтворення сторінки. Ви можете просто затримати прослуховування події прокрутки приблизно на 1 секунду.

Question 9

Існує ще один спосіб відокремити створену користувачем прокрутку: ви можете використовувати альтернативні обробники подій, наприклад „коліщатко миші”, „переміщення дотику”, „клавіатура” з кодами 38 та 40 для прокрутки стрілки, для прокрутки за допомогою смуги прокрутки - якщо Подія "scroll" запускається одночасно з "mousedown" до події "mouseup".

Question 10

Знайшов це дуже корисним. Ось версія coffeescript для тих, хто так схильний.

$ ->
  S.userScroll = false

  # reset flag on back/forward
  if $.history?
    $.history.init (hash) ->
      S.userScroll = false

  mouseEvent = (e)->
    S.userScroll = true

  $(document).keydown (e) ->
    importantKey =  (e.which == 33 or        # page up
      e.which == 34 or    # page dn
      e.which == 32 or    # spacebar
      e.which == 38 or    # up
      e.which == 40 or    # down
      (e.ctrlKey and e.which == 36) or    # ctrl + home
      (e.ctrlKey and e.which == 35)    # ctrl + end
    )
    if importantKey
      S.userScroll = true;

  # Detect user scroll through mouse
  # Mozilla/Webkit
  if window.addEventListener
      document.addEventListener('DOMMouseScroll', mouseEvent, false);

  # for IE/OPERA etc
  document.onmousewheel = mouseEvent;

Question 11

якщо ви використовуєте JQuery, ніж, мабуть, є краща відповідь - я просто випробовую це сам.

див .: Виявлення тригера події jquery користувачем або виклик кодом

Question 12

Це може не допомогти з вашим додатком, але мені потрібно було запустити подію на прокрутці користувача, але не програмній прокрутці та розміщенні, якщо це допоможе комусь іншому.

Прослухайте wheelподію замість scroll,

Він спрацьовує, коли користувач використовує колесо миші або накладку для відстеження (що, на мою думку, більшість людей все одно прокручують), і не запускається, коли ви програмуєте програму. Я використовував його, щоб розрізнити дію прокрутки користувача та функції прокрутки.

https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event


element.addEventListener('wheel', (event) => {
       //do user scroll stuff here
})

Одне застереження - wheelне спрацьовує прокрутка на мобільному, тому я перевірив, чи пристрій мобільний, і використовував подібні функції

if(this.mobile){
  element.addEventListener('scroll', (event) => {
       //do mobile scroll stuff here
  })
}