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

Ответ 1

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

Обратите внимание, что при скрытии переполнения функция прокрутки по умолчанию теряется, поэтому вы должны создать ее самостоятельно. Для этого вы можете установить прослушиватель колесиков мыши на интересующий вас 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
  }
});

Ответ 2

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

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

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

Ответ 3

Я использую overflow: scroll, но также Абсолютно позиционирую div над полосой прокрутки, чтобы скрыть это.

Ответ 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>