Поймать событие прокрутки при переполнении: скрытый элемент

Question

Есть идеи о том, как отловить событие прокрутки в элементе с переполнением: скрытый? Я хотел бы прокрутить столбец, не показывая полосу прокрутки пользователю.

Answer 1

Это на самом деле довольно глубокий процесс. Что я делаю, так это устанавливаю глобальные флаги, когда пользовательская мышь входит и оставляет элемент, который вы хотите прокрутить. Затем в событии mousewheel для тела я проверяю, имеет ли флаг MOUSE_OVER значение true, затем прекращает распространение события. Это делается для того, чтобы основная часть не прокручивалась в случае переполнения всей страницы.

Обратите внимание, что при скрытом переполнении способность прокрутки по умолчанию теряется, поэтому вы должны создать ее самостоятельно. Чтобы сделать это, вы можете установить прослушиватель mousewheel на свой div и использовать свойство event.wheelDelta, чтобы проверить, прокручивает ли пользователь вверх или вниз. Это значение отличается в зависимости от браузера, но обычно оно отрицательно при прокрутке вниз и положительно при прокрутке вверх. Затем вы можете соответствующим образом изменить положение вашего div.

Этот код быстро взломан, но по сути он будет выглядеть так ...

var MOUSE_OVER = false;
$('body').bind('mousewheel', function(e){
  if(MOUSE_OVER){
    if(e.preventDefault) { e.preventDefault(); } 
    e.returnValue = false; 
    return false; 
  }
});

$('#myDiv').mouseenter(function(){ MOUSE_OVER=true; });
$('#myDiv').mouseleave(function(){ MOUSE_OVER=false; });

$('#myDiv').bind('mousewheel', function(e){
  var delta = e.wheelDelta;
  if(delta > 0){
    //go up
  }
  else{
    //go down
  }
});

Answer 2

$("body").css("overflow", "hidden")

$(document).bind('mousewheel', function(evt) {
    var delta = evt.originalEvent.wheelDelta
    console.log(delta)
})

у меня работает.адаптировано из Как получить свойство wheelDelta?

Answer 3

Я использую overflow: scroll, но также размещаю div на полосе прокрутки, чтобы скрыть его.

Answer 4

$("div").on('wheel', function (e) {
        if (e.originalEvent.deltaY < 0) {
        console.log("Scroll up");
    } else {
        console.log("Scroll down");
    }
});

Это помогло мне. JSFiddle

StackFiddle:

$("div").on('wheel', function(e) {
  if (e.originalEvent.deltaY < 0) {
    console.log("Scroll up");
  } else {
    console.log("Scroll down");
  }
});

div {
  height: 50px;
  width: 300px;
  background-color: black;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div></div>