Overflow-x: скрытие - это нарушение события прокрутки jquery

У меня возникла проблема, когда установка overflow-x: скрыта в элементах html и body, предотвращает запуск события прокрутки jquery.

CSS

html, body {
  overflow-x: hidden;
}

JS:

$(function(){
  $(window).on("scroll", function(e){
    console.log("scrolling");    
  });
});

http://jsfiddle.net/r7Fqq/6/

Попробуйте сами: Комментировать outflow-x: скрывать и открывать консоль. Вы должны увидеть "прокрутку", зарегистрированную при прокрутке вверх и вниз по html-блоку. Прокомментируйте это, и событие прокрутки не работает.

Кто-нибудь знает, почему это происходит? Я знаю, что когда вы устанавливаете переполнение для скрытия, он отключает прокрутку, но он должен делать это только для оси, которую вы устанавливаете (x только в этом случае). Заранее благодарим за любую помощь.

Ответы

Ответ 1

Была та же проблема. Решение состоит в том, чтобы удалить переполнение-x: скрытое от элемента html и оставить его только на элементе body, и оно должно работать.

Ответ 2

$(function() {
    $(window).bind('mousewheel', function(event, delta) {
        console.log("mousewheel");
        return false;
    });
});

Ответ 3

Установите body {height: 100%;} в css. Тогда это сработает. Вы можете применить свойство переполнения в div, чем для всего тела, а затем соответствующим образом изменить JS-код. Установка свойства переполнения на теле отнимает у него способность прокрутки. Другое решение может использовать событие Jquery wheel, как описано в этом post- (fooobar.com/questions/225011/...).

Ответ 4

Я также нашел, что это так. Когда мы добавили:

body {
  overflow-x: hidden;
}

все события window.addEventListener('scroll') прекратились. Я считаю, это связано с тем, что событие прокрутки не перемещается в document.body. Когда я меняю eventListener на document.body.addEventListener('scroll'), все начинает работать снова. Интересно, что мой event.bubbles boolean является ложным. Из того, что я прочитал, событие прокрутки должно появиться в окне.

Решение

изменить

window.addEventListener('scroll', () => console.log('MEOW'))

document.body.addEventListener('scroll', () => console.log('MEOW'))