не допускать пузырей прокрутки от элемента к окну

Ответ 1

Решено (для современных браузеров) с использованием простого свойства CSS:
overscroll-поведение

body{
  height: 600px;
  overflow: auto;
}

section{
  width: 50%;
  height: 50%;
  overflow: auto;
  background: lightblue;
  overscroll-behavior: none; /*   <--- the trick    */
}

section::before{
  content: '';
  height: 200%;
  display: block;
}

<section>
 <input value='end' />
</section>

Ответ 2

Извините, насколько я знаю, невозможно отменить какое-либо событие прокрутки.

Оба W3 и MSDN говорят

Cancelable  No
Bubbles     No

Я думаю, вам придется оставить это, чтобы авторы браузера исправили. Firefox (3.5 на Linux, в любом случае), похоже, имеет лучшее поведение для меня: он только прокручивает родительский элемент, если ребенок уже находится в верхнем/нижнем конце в момент начала использования колесика прокрутки.

Ответ 3

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

Следующий код блокирует ось Y, если один наводится на $("#popup"):

// here we store the window scroll position to lock; -1 means unlocked
var forceWindowScrollY = -1;

$(window).scroll(function(event) {
  if(forceWindowScrollY != -1 && window.scrollY != forceWindowScrollY) {
    $(window).scrollTop(forceWindowScrollY);    
  }
});

$("#popup").hover(function() {
  if(forceWindowScrollY == -1) {
    forceWindowScrollY = $(window).scrollTop();
  }
}, function() {
  forceWindowScrollY = -1;
});

Я использую это для предложения предложения http://bundestube.de/ (введите некоторые символы в верхнее окно поиска, чтобы сделать видимым панель прокрутки)

Это работает безупречно в Chrome/Safari (Webkit) и с некоторыми прокручивающими глюками в Firefox и Opera. По какой-то причине он не работает с моей установкой IE. Я предполагаю, что это связано с методом наведения jQuery, который, похоже, не работает корректно в 100% случаев.

Ответ 4

Я знаю, это довольно старый вопрос, но поскольку это один из лучших результатов в google... Мне пришлось как-то отменить прокрутку пузырьков без jQuery, и этот код работает для меня:

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
    e.preventDefault();
  e.returnValue = false;  
}

document.getElementById('a').onmousewheel = function(e) { 
  document.getElementById('a').scrollTop -= e. wheelDeltaY; 
  preventDefault(e);
}

Ответ 5

мой плагин jQuery:

$('.child').dontScrollParent();

$.fn.dontScrollParent = function()
{
    this.bind('mousewheel DOMMouseScroll',function(e)
    {
        var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;

        if (delta > 0 && $(this).scrollTop() <= 0)
            return false;
        if (delta < 0 && $(this).scrollTop() >= this.scrollHeight - $(this).height())
            return false;

        return true;
    });
}

Ответ 6

Вот как я решил проблему:

Я вызываю следующее, когда открываю всплывающее окно:

$('body').css('overflow','hidden');

Затем, когда я закрываю всплывающее окно, я вызываю это:

$('body').css('overflow','auto');

Всплывающее меню должно быть модальным, поэтому взаимодействие с базовым телом не требуется

Хорошо работает

Ответ 7

По-видимому, вы можете установить overflow:hidden, чтобы предотвратить прокрутку. Не уверен, как это произойдет, если документ уже прокручивается. Я тоже на безрукавном ноутбуке, поэтому мне не нужно прокручивать колесо для меня сегодня вечером:-) Это, вероятно, стоит того, чтобы выстрелить.

Ответ 8

вы можете попробовать панель jscroll внутри iframe для замены прокрутки по умолчанию.

http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

Я не уверен, но попробую

Ответ 9

Вот что я делаю:

  $('.noscroll').on('DOMMouseScroll mousewheel', function(ev) {
     var prevent = function() {
         ev.stopPropagation();
         ev.preventDefault();
         ev.returnValue = false;
         return false;
     }
     return prevent();
  }); 

демонстрационная скрипка

Используйте CSS overflow:hidden, чтобы скрыть полосу прокрутки, поскольку это ничего не сделает, если они перетащит ее.

Работает кросс-браузер

Ответ 10

Новый веб-разработчик здесь. Это работало как прелесть для меня как в IE, так и в Chrome.

static preventScrollPropagation(e: HTMLElement) {
    e.onmousewheel = (ev) => {
        var preventScroll = false;
        var isScrollingDown = ev.wheelDelta < 0;
        if (isScrollingDown) {
            var isAtBottom = e.scrollTop + e.clientHeight == e.scrollHeight;
            if (isAtBottom) {
                preventScroll = true;
            }
        } else {
            var isAtTop = e.scrollTop == 0;
            if (isAtTop) {
                preventScroll = true;
            }
        }
        if (preventScroll) {
            ev.preventDefault();
        }
    }
}

Не позволяйте количеству строк обмануть вас, это довольно просто - просто немного подробный для читаемости (самодокументирующий код ftw справа?)

Ответ 11

Я хотел бы добавить немного обновленный код, который, как мне показалось, лучше всего работает:

var yourElement = $('.my-element');

yourElement.on('scroll mousewheel wheel DOMMouseScroll', function (e) {
    var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;

    if (delta > 0 && $(this).scrollTop() <= 0)
        return false;
    if (delta < 0 && $(this).scrollTop() >= this.scrollHeight - $(this).outerHeight())
        return false;

    return true;
});

Разница между этой и той, которая уже упоминалась выше, заключается в добавлении большего количества событий и использовании externalHeight() вместо height(), чтобы избежать сбоев если элемент имеет дополнение!

Ответ 12

$('.scrollable').on('DOMMouseScroll mousewheel', function (e) {
    var up = false;
    if (e.originalEvent) {
        if (e.originalEvent.wheelDelta) up = e.originalEvent.wheelDelta / -1 < 0;
        if (e.originalEvent.deltaY) up = e.originalEvent.deltaY < 0;
        if (e.originalEvent.detail) up = e.originalEvent.detail < 0;
    }

    var prevent = function () {
        e.stopPropagation();
        e.preventDefault();
        e.returnValue = false;
        return false;
    }

    if (!up && this.scrollHeight <= $(this).innerHeight() + this.scrollTop + 1) {
        return prevent();
    } else if (up && 0 >= this.scrollTop - 1) {
        return prevent();
    }
});

Ответ 13

На данный момент в 2018 году и далее e.preventDefault достаточно.

$('.elementClass').on("scroll", function(e){
    e.preventDefault();
 }); 

Это предотвратит прокрутку к родителю.

Ответ 14

Попробуйте добавить этот стиль CSS к элементу - overscroll-поведения: нет; для меня это сработало.

Ответ 15

function stopPropogation(e)
{
    e = e || window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
    if (e.preventDefault) e.preventDefault();
}

Это должно работать.