Стоп-страница из прокрутки, если зависание div

У меня есть div, который прокручивается, но всякий раз, когда вы достигаете его нижней/верхней части, он начинает прокручивать всю страницу. Это может раздражать пользователей, которые быстро прокручиваются, а затем вся страница начинает неожиданно прокручиваться.

Мне нужно что-то, где, если вы нависаете над div, страница не прокручивается.

Я пробовал это, добавляя CSS, когда я наводил div...

body {
    overflow:hidden;
}

... Он работает, но есть одна проблема. Полоса прокрутки исчезает, и это выглядит глупо, чтобы исчезнуть/снова появиться. Любой способ добиться такого же эффекта, но сохранить видимость полосы прокрутки? Я видел это в чате Facebook.

Ответы

Ответ 1

Вот очень простой способ остановить распространение без плагинов, просто jQuery.

Обновление. Код был обновлен, чтобы корректно работать в IE9+. Не тестировались в предыдущих версиях.

Сначала создайте класс на <div>, чтобы пометить его как имеющее такое поведение. В моем примере я использую класс .Scrollable.

<div class="Scrollable">
  <!-- A bunch of HTML here which will create scrolling -->
</div>

JQuery для отключения:

$('.Scrollable').on('DOMMouseScroll mousewheel', function(ev) {
    var $this = $(this),
        scrollTop = this.scrollTop,
        scrollHeight = this.scrollHeight,
        height = $this.height(),
        delta = (ev.type == 'DOMMouseScroll' ?
            ev.originalEvent.detail * -40 :
            ev.originalEvent.wheelDelta),
        up = delta > 0;

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

    if (!up && -delta > scrollHeight - height - scrollTop) {
        // Scrolling down, but this will take us past the bottom.
        $this.scrollTop(scrollHeight);
        return prevent();
    } else if (up && delta > scrollTop) {
        // Scrolling up, but this will take us past the top.
        $this.scrollTop(0);
        return prevent();
    }
});

В сущности, это то, что нужно определить, в каком направлении запрашивается прокрутка (на основе originalEvent.wheelDelta: positive = up, negative = down). Если запрошенный delta события mousewheel будет перемещаться прокручиваться мимо top или bottom <div>, отмените событие.

В IE, в частности, прокрутка событий, которые проходят мимо прокручиваемой области дочерних элементов, затем сворачиваются к родительским элементам, а прокрутка продолжается независимо от отмены события. Поскольку мы отменяем событие в любом случае, а затем управляем прокруткой на дочернем элементе через jQuery, это предотвращается.

Это свободно основано на том, что этот вопрос решает проблему, но не требует плагина и кросс-браузер совместим с IE9 +.

Вот рабочий jsFiddle, демонстрирующий код в действии.

Вот рабочий jsFiddle, демонстрирующий код в действии и обновленный для работы с IE.

Вот рабочий jsFiddle, демонстрирующий код в действии и обновленный для работы с IE и FireFox. См. этот пост для получения дополнительной информации о необходимости изменений.