Запретить прокрутку родительского контейнера при прокрутке в переполнении: контейнер прокрутки достиг своих пределов

Question

Запретить прокрутку родительского контейнера при прокрутке в переполнении: контейнер прокрутки достиг своих пределов

Проще говоря, я думаю, что вы все знаете эту проблему: вы используете колесо мыши (или жест трекпада) для прокрутки внутри div, которое установлено в overflow:scroll (или параметр для этого эффекта). Как только вы достигнете конца области прокрутки, команды прокрутки немедленно отправляются в родительский контейнер - например, в Главное окно.

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

Я создал этот jsFiddle , чтобы продемонстрировать проблему и обеспечить почва для экспериментов.

Единственная идея, которая пришла мне в голову, была использовать preventDefault, но так как я не мастер JS, я не вижу, где и как я мог бы применить это правильно.

550 2

jQuery html css scrollable

2 ответов:

Comments

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

Lokesh Suthar · Accepted Answer · 2014-03-10 00:19:27

Это не оптимально, но i bootstrap использует это для своих модальных окон.

Скрипка
.overflowHidden {
    overflow:hidden !important;
}
$('#scrollable').hover(function () {
        console.log("hello");
        $('body').addClass('overflowHidden');
    }, function () {
        $('body').removeClass('overflowHidden');
    });

SquareCat · Accepted Answer · 2014-03-11 23:25:26

После обширных исследований и бурных испытаний я объединил свои результаты в решение, которое идеально подходит для моей цели.

Подход прост

Вместо измерения условий прокрутки (при прокрутке) из контейнера, мы просто заменяем всю функциональность прокрутки, написав наш собственный обработчик прокрутки. Таким образом, мы имеем полный контроль над тем, что происходит, плюс событие прокрутки не может по умолчанию (или пузырь) к внешнему контейнеру:

Знакомьтесь greedyScroll v0. 9b
$.fn.extend({
    greedyScroll: function(sensitivity) {
        return this.each(function() {
            $(this).bind('mousewheel DOMMouseScroll', function(evt) {
               var delta;
               if (evt.originalEvent) {
                  delta = -evt.originalEvent.wheelDelta || evt.originalEvent.detail;
               }
               if (delta !== null) {
                  evt.preventDefault();
                  if (evt.type === 'DOMMouseScroll') {
                     delta = delta * (sensitivity ? sensitivity : 20);
                  }
                  return $(this).scrollTop(delta + $(this).scrollTop());
               }
            });
        });
    }
});
Использование

HTML:
<div class="scrollWrapper"></div>
Javascript:
$('.scrollWrapper').greedyScroll(25);
Я обнаружил, что значение 20 прекрасно работает для чувствительности, но некоторые могут предпочесть более высокие или более низкие настройки.
Отказ от ответственности

Я не утверждаю, что это работает ни в чем, кроме Chrome, так как это то, что я исключительно убедился, что он работает.

Кредиты почти полностью принадлежат команде, разработавшей плагин, на который я ссылался в одном из комментариев к Ответ Локеша .

Улучшения кода всегда приветствуются.