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

Question

[slavkovl]

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

Такая ситуация: есть выпадающий список, который появляется по клику на пункт меню. У этого списка есть высота и свойство overflow-y: scroll; . Когда курсор мыши находится в пределах списка, при прокрутке колеса мыши список прокручивается до конца, а потом начинает крутится сама страница. Как это ограничить, чтобы при достижении конца списка страница оставалась неподвижной и работал только скролл в пределах списка, если курсор там?

Comments

[slavkovl]

На сайте нашел вот такой вариант jsfiddle.net/iiil/DN6HB/1 и он работает. Но там при наведении на область списка где у нас прокрутка, пропадает скрол основной страницы, страница становится на несколько пикселей шире (на ширину скрола) и соответственно контент "прыгает" влево/вправо. Есть ли другой вариант?

Answer 1

[Kuzzy]

Вот по-проще jsfiddle.net/DN6HB/7
Мопед не мой, найдено на просторах интернета.

Comments

[slavkovl]

Спасибо, это пока лучшее решение.

[Space]

@Kuzzy Как сделать, чтобы скролл был прям на контенте, а не выделялся на белой полосе?

Answer 2

[Юрий Лобанов]

Как решить проблему со скроллом?
Как реализовать внутрений скролл на странице?

Comments

[Юрий Лобанов]

Да, не прочитал уточнения. Вы на мой же вариант и сделали ссылку ) Тогда надо подумать

[slavkovl]

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

Answer 3

[Юрий Лобанов]

Попробуйте сделать так:
jsfiddle.net/iiil/DN6HB/6
Весь контент оберните в div class="wrap" и при каждом хавере узнавайте его ширину и приписывайте ему эту ширину, тогда скролл не будет влиять на контент.
Для пример Вы можете изменить класс у wrap на wrap1 и посмотрите, что контент движется.

Comments

[slavkovl]

Я этот вариант также рассматривал, но все же напрягает мерцание скролбара, то пропадает, то появляется.

[Юрий Лобанов]

@slavkovl ну выбор Ваш. Вариант достаточно простой, а тот факт, что нет скроллбара однозначно указывает, что не будет скроллиться страница - для пользователя довольно логично.

Answer 4

[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());
}
});
});

Comments

[Юрий Лобанов]

jsfiddle.net/iiil/DN6HB/8
как-то странно Ваш вариант скроллится.

[slavkovl]

Почему странно?

[Юрий Лобанов]

@slavkovl почему-то у меня он моментально работает, только если не тянуть за ползунок. В примере @Kuzzy движется плавно.

[slavkovl]

Да, действительно, вариант @Kuzzy работает более плавно.

[Georrg]

Подскажите, пожалуйста, как сделать это в обратную сторону? Есть модуль, с прокруткой, так вот надо сделать, что бы после вложенной прокрутки начала крутиться внешняя. Задача обратная вашей. Я плохо представляю, как это сделать, пытался переделать ваш пример, но что то не выходит...

Answer 5

[codriter]

Не пробовал, но может подойдет e.stopPropagation()?

Answer 6

[Georrg]

Подскажите, пожалуйста, как сделать это в обратную сторону? Есть модуль, с прокруткой, так вот надо сделать, что бы после вложенной прокрутки начала крутиться внешняя. Задача обратная вашей. Я плохо представляю, как это сделать, пытался переделать ваш пример, но что то не выходит...