Прокрутка внутри элемента без перемещения страницы

Question

У меня есть <div id="innerContent"> с overflow-y:scroll;, Ссылки на якоря в innerContent расположены на родительской странице, а не в div,

До сих пор я пробовал привязки и прокрутки, чтобы попытаться прокрутить содержимое. Они оба завершают прокрутку, но высота innerContent больше, чем у окна браузера, поэтому вся родительская страница также прокручивается до якоря при нажатии на ссылки.

Есть ли способ сделать это с помощью JavaScript, не перемещая родительскую страницу? У меня нет контроля над высотой div - это чужой дизайн.

Это близко... но здесь нет ответа. Как автоматически прокрутить встроенный div без прокрутки всей страницы?

Спасибо!

Answer 1

Этот jsfiddle работает в Chrome для меня. Не проверено в других браузерах.

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

$('#scroll').bind('mousewheel', function(e){

    $(this).scrollTop($(this).scrollTop()-e.originalEvent.wheelDeltaY);

    //prevent page fom scrolling
    return false;    
});

Answer 2

Вдохновлен кодом Морлема, но работает наоборот: остановите распространение только в случае прокрутки. В чистом JS:

container.addEventListener('mousewheel', function(e) {
    var scrollingOverTheTop = (e.wheelDelta > 0 && this.scrollTop == 0);
    var scrollingOverTheBottom = (e.wheelDelta < 0 && (this.scrollTop >= this.scrollHeight - this.offsetHeight));
    if (scrollingOverTheBottom || scrollingOverTheTop) {
        e.preventDefault();
        e.stopPropagation();
    }
}, true);

Answer 3

Используйте фиксированный макет. В этом jsfiddle у меня есть рабочий пример для этого. Изучите CSS. Вам не нужен JavaScript для этого.

Answer 4

И если вы решите использовать javascript (опять же, как сказал KooiInc, если вам не нужен js, не используйте его), вы можете попробовать использовать event.cancelBubble = true, что предотвратит распространение события в родительский контейнер, чтобы страница не увидела вашу внутреннюю прокрутку div. Дополнительная команда, которую вы можете использовать, event.preventDefault(), что предотвращает запуск браузером поведения по умолчанию (т.е. прокрутки) к событию.

Answer 5

Я только что решил эту проблему, создав в CSS следующее:

body.scroll_locked {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

Затем, когда я показываю свой модал / лайтбокс, который является JavaScript (jQuery), я добавляю класс scroll_locked в тело, чтобы заблокировать его на месте, и удаляю класс, чтобы вернуться назад. Похоже, вы могли бы сделать то же самое для события mouseenter/mouseleave для div, который всегда находится на странице, и вы хотите иметь тот же эффект.

$('body').addClass('scroll_locked');
$('body').removeClass('scroll_locked');