Как осуществить ограничение работы скролла в пределах блока при прокрутке колесом мыши?

Здравствуйте.

Такая ситуация: есть выпадающий список, который появляется по клику на пункт меню. У этого списка есть высота и свойство overflow-y: scroll; . Когда курсор мыши находится в пределах списка, при прокрутке колеса мыши список прокручивается до конца, а потом начинает крутится сама страница. Как это ограничить, чтобы при достижении конца списка страница оставалась неподвижной и работал только скролл в пределах списка, если курсор там?
  • Вопрос задан
  • 7417 просмотров
Решения вопроса 1
@Kuzzy
Вот по-проще jsfiddle.net/DN6HB/7
Мопед не мой, найдено на просторах интернета.
Ответ написан
Пригласить эксперта
Ответы на вопрос 5
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Попробуйте сделать так:
jsfiddle.net/iiil/DN6HB/6
Весь контент оберните в div class="wrap" и при каждом хавере узнавайте его ширину и приписывайте ему эту ширину, тогда скролл не будет влиять на контент.
Для пример Вы можете изменить класс у wrap на wrap1 и посмотрите, что контент движется.
Ответ написан
@slavkovl Автор вопроса
Вопрос решил.

$('элемент только в пределах которого должен работать скрол').hover(function() {
$(this).bind('mousewheel DOMMouseScroll', function(e) {
var scrollTo = null;
if (e.type == 'mousewheel') {
scrollTo = (e.originalEvent.wheelDelta * -1);
} else if (e.type == 'DOMMouseScroll') {
scrollTo = 1000 * e.originalEvent.detail;
}

if (scrollTo) {
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});
});
Ответ написан
@Georrg
Подскажите, пожалуйста, как сделать это в обратную сторону? Есть модуль, с прокруткой, так вот надо сделать, что бы после вложенной прокрутки начала крутиться внешняя. Задача обратная вашей. Я плохо представляю, как это сделать, пытался переделать ваш пример, но что то не выходит...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы