Как определить направление прокрутки

Question

Как определить направление прокрутки

Я хочу, чтобы запустить функцию, когда кто-то прокручивает на элемент. Что-то вроде этого:

 $('div').scrollDown(function(){ alert('down') });

 $('div').scrollUp(function(){ alert('up') });

но эти функции не существуют. Есть ли решение этой проблемы? они кажется, это можно сделать. К сожалению исходный код сжат, так что не повезло там...

Спасибо!!

736 8

jQuery scroll direction

8 ответов:

Comments

Ничего не найдено.

Rik de Vos · Accepted Answer · 2013-04-17 03:11:15

мне удалось выяснить это, в конце концов, так что если кто-то ищет ответ:

 //Firefox
 $('#elem').bind('DOMMouseScroll', function(e){
     if(e.originalEvent.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.originalEvent.wheelDelta < 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

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

honk31 · Accepted Answer · 2014-09-05 16:11:48

следующем примере будет слушать прокрутки мыши, ни потрогать, ни трекпад свитки.

Он использует jQuery.on () (по состоянию на jQuery 1.7, the .на() метод является предпочтительным методом для присоединения обработчиков событий для документа).
$('#elem').on( 'DOMMouseScroll mousewheel', function ( event ) {
  if( event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0 ) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
    //scroll down
    console.log('Down');
  } else {
    //scroll up
    console.log('Up');
  }
  //prevent page fom scrolling
  return false;
});
работает на всех браузерах.

скрипка:http://jsfiddle.net/honk1/gWnNv/7/

Shikkediel · Accepted Answer · 2015-10-26 09:45:29

этот заслуживает обновления-в настоящее время у нас есть wheel событие :
$(function() {

$(window).on('wheel', function(e) {

	var delta = e.originalEvent.deltaY;

	if (delta > 0) $('body').text('down');
	else $('body').text('up');

	return false; // this line is only added so the whole page won't scroll in the demo
});
});
body {
  font-size: 22px;
  text-align: center;
  color: white;
  background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
поддержка была довольно хороша в современных браузерах уже довольно давно :

Chrome 31+

Firefox 17+

IE9+

Опера 18+

Safari 7+

https://developer.mozilla.org/en-US/docs/Web/Events/wheel

если требуется более глубокая поддержка браузера, вероятно, лучше всего использовать колесико мыши.js вместо того, чтобы возиться:

https://plugins.jquery.com/mousewheel/
$(function() {

$(window).mousewheel(function(turn, delta) {

	if (delta > 0) $('body').text('up');
	else $('body').text('down');

	return false; // this line is only added so the whole page won't scroll in the demo
});
});
body {
  font-size: 22px;
  text-align: center;
  color: white;
  background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

Chemical Programmer · Accepted Answer · 2017-05-23 15:10:33

Существующее Решение

не может быть 3 решение из этой публикации и другая статья stackoverflow.

Решение 1
    var lastScrollTop = 0;
    $(window).on('scroll', function() {
        st = $(this).scrollTop();
        if(st < lastScrollTop) {
            console.log('up 1');
        }
        else {
            console.log('down 1');
        }
        lastScrollTop = st;
    });
решение 2
    $('body').on('DOMMouseScroll', function(e){
        if(e.originalEvent.detail < 0) {
            console.log('up 2');
        }
        else {
            console.log('down 2');
        }
    });
решение 3
    $('body').on('mousewheel', function(e){
        if(e.originalEvent.wheelDelta > 0) {
            console.log('up 3');
        }
        else {
            console.log('down 3');
        }
    });
Multi Browser Test

я не мог проверить его на Safari

chrome 42 (Win 7)

Решение 1

вверх : 1 Событие на 1 свиток

вниз : 1 Событие на 1 свиток

Soltion 2

итог : не работает

вниз : не работает

решение 3

вверх : 1 Событие на 1 свиток

вниз : 1 Событие на 1 свиток

Firefox 37 (Win 7)

Решение 1

Up: 20 событий на 1 прокрутку

вниз: 20 событий на 1 прокрутку

Soltion 2

итог : не работает

вниз : 1 Событие на 1 свиток

решение 3

итог : не работает

вниз : не работает

IE 11 (Win 8)

решение Один

вверх: 10 событий на 1 прокрутку (побочный эффект : прокрутка вниз произошла наконец)

вниз: 10 событий на 1 прокрутку

Soltion 2

итог : не работает

вниз : не работает

решение 3

итог : не работает

вниз : 1 Событие на 1 свиток

IE 10 (Win 7)

решение Один

вверх : 1 Событие на 1 свиток

вниз : 1 Событие на 1 свиток

Soltion 2

итог : не работает

вниз : не работает

решение 3

вверх : 1 Событие на 1 свиток

вниз : 1 Событие на 1 свиток

IE 9 (Win 7)

Решение 1

вверх : 1 событие в 1 прокрутите

вниз : 1 Событие на 1 свиток

Soltion 2

итог : не работает

вниз : не работает

решение 3

вверх : 1 Событие на 1 свиток

вниз : 1 Событие на 1 свиток

IE 8 (Win 7)

Решение 1

вверх : 2 события на 1 прокрутку (побочный эффект: вниз прокрутка произошла наконец-то!)

вниз: 2~4 события на 1 прокрутку

Soltion 2

итог : не работает

вниз : не работает

решение 3

вверх : 1 Событие на 1 свиток

вниз : 1 Событие на 1 свиток

Комбинированное Решение

Я проверил, что побочный эффект от IE 11 и IE 8 с if else заявление. Итак, Я заменил его на if else if заявление следующим.

из теста с несколькими браузерами я решил использовать решение 3 для обычных браузеров, и Решение 1 для firefox и IE 11.

Я говорил ответ для обнаружения IE 11.
    // Detect IE version
    var iev=0;
    var ieold = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
    var trident = !!navigator.userAgent.match(/Trident\/7.0/);
    var rv=navigator.userAgent.indexOf("rv:11.0");

    if (ieold) iev=new Number(RegExp.);
    if (navigator.appVersion.indexOf("MSIE 10") != -1) iev=10;
    if (trident&&rv!=-1) iev=11;

    // Firefox or IE 11
    if(typeof InstallTrigger !== 'undefined' || iev == 11) {
        var lastScrollTop = 0;
        $(window).on('scroll', function() {
            st = $(this).scrollTop();
            if(st < lastScrollTop) {
                console.log('Up');
            }
            else if(st > lastScrollTop) {
                console.log('Down');
            }
            lastScrollTop = st;
        });
    }
    // Other browsers
    else {
        $('body').on('mousewheel', function(e){
            if(e.originalEvent.wheelDelta > 0) {
                console.log('Up');
            }
            else if(e.originalEvent.wheelDelta < 0) {
                console.log('Down');
            }
        });
    }

AlienWebguy · Accepted Answer · 2011-08-23 03:22:02

$(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);
    });
});

Demo:http://jsfiddle.net/AlienWebguy/Bka6F/

Erick Petrucelli · Accepted Answer · 2011-08-23 03:46:49

вот пример показывает простой способ сделать это. Сценарий такой:
$(function() {
  var _t = $("#container").scrollTop();
  $("#container").scroll(function() {
    var _n = $("#container").scrollTop();
    if (_n > _t) {
      $("#target").text("Down");
    } else {
      $("#target").text("Up");
    }
    _t = _n;
  });
});
The #container это ваш div id. Элемент #target - это просто, чтобы увидеть его работы. Измените на то, что вы хотите, когда вверх или вниз.

EDIT

ОП не говорил раньше, но так как он использует div с overflow: hidden, прокрутка не происходит, тогда скрипт для обнаружения прокрутки является наименьшим из них. Ну и как обнаружить то, чего нет случилось?!

Итак, ОП сам разместил ссылку с тем, что он хочет, так почему бы не использовать эту библиотеку? http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js.

звонок просто:
$(function() {
    $(".scrollable").scrollable({ vertical: true, mousewheel: true });
});

Jithin U. Ahmed · Accepted Answer · 2013-11-24 10:27:55

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
$(document).bind(mousewheelevt, 
function(e)
    {
        var evt = window.event || e //equalize event object     
        evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible               
        var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF
        if(delta > 0) 
            {
            scrollup();
            }
        else
            {
            scrolldown();
            }   
    }
);

user122293 · Accepted Answer · 2016-02-10 18:04:11

вы можете использовать этот простой плагин, чтобы добавить scrollUp и scrollDown к вашему jQuery

https://github.com/phpust/JQueryScrollDetector

var lastScrollTop = 0;
var action = "stopped";
var timeout = 100;
// Scroll end detector:
$.fn.scrollEnd = function(callback, timeout) {    
      $(this).scroll(function(){
        // get current scroll top 
        var st = $(this).scrollTop();
        var $this = $(this);
        // fix for page loads
        if (lastScrollTop !=0 )
        {
            // if it's scroll up
            if (st < lastScrollTop){
                action = "scrollUp";
            } 
            // else if it's scroll down
            else if (st > lastScrollTop){
                action = "scrollDown";
            }
        }
        // set the current scroll as last scroll top
        lastScrollTop = st;
        // check if scrollTimeout is set then clear it
        if ($this.data('scrollTimeout')) {
          clearTimeout($this.data('scrollTimeout'));
        }
        // wait until timeout done to overwrite scrolls output
        $this.data('scrollTimeout', setTimeout(callback,timeout));
    });
};

$(window).scrollEnd(function(){
    if(action!="stopped"){
        //call the event listener attached to obj.
        $(document).trigger(action); 
    }
}, timeout);