Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Помогите со скроллингом, плиз (https://javascript.ru/forum/misc/23788-pomogite-so-skrollingom-pliz.html)

konan 06.12.2011 15:22

Помогите со скроллингом, плиз
 
Окно браузера имеет скроллинг, в нем див тоже со скроллингом. Как сделать, чтобы прокручивая до конца див, скроллинг body не срабатывал
(т.е. пока курсор находится в этом диве).

devote 06.12.2011 15:47

перехватывать события колеса мыши

konan 06.12.2011 16:24

Событие перехватываю,отключаю скроллинг. Но вместе со скроллингом окна выключается и скроллинг дива.

melky 06.12.2011 16:33

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

Маэстро 06.12.2011 22:41

Цитата:

Сообщение от melky (Сообщение 141049)
дык не надо собыие отменять, если оно происходит именно в диве. смотрите, откуда пришло событие.

А можете уточнить? Что значит смотреть, откуда пришло событие? Пришло событие из DIV_а. Но дальше если продолжать вращать колесо, то оно передается документу (body) и заставляет двигаться глобальный скроллер страницы. Можете дать примерчик?
У меня есть решение этой задачки, но может Ваше проще?

Маэстро 28.12.2011 17:01

konan,
проблема заключается в том, что при вращении колеса мыши браузер следит, где находится скроллер в текущем DIV_е. Если он не дошел до "упора" (т.е. до верха или низа), то браузер посылает сообщения этому DIV_у, а как только упор, так браузер посылает сообщение своему телу (body). Поэтому надо перехватывать момент упора и запрещать дальнейшее распространение события.
Тестовый пример можете посмотреть здесь:
http://gigalit.info/test107.htm
Хочу предупредить, что он нормально работает только в Google Chrome и FireFox.
Для Opera, IE надо ещё учитывать высоту скроллера, т.е. доделать скрипт

Livaanderiamarum 28.12.2011 18:08

Цитата:

Сообщение от Маэстро (Сообщение 146854)
Поэтому надо перехватывать момент упора и запрещать дальнейшее распространение события.

да, уже пишу)

konan 30.12.2011 14:21

Цитата:

Сообщение от Маэстро (Сообщение 146854)
konan,
Тестовый пример можете посмотреть здесь:
http://gigalit.info/test107.htm
Хочу предупредить, что он нормально работает только в Google Chrome и FireFox.
Для Opera, IE надо ещё учитывать высоту скроллера, т.е. доделать скрипт

В Firefox как то некорректно срабатывает скрол DIVa или вообще не срабатывает.

Маэстро 30.12.2011 18:10

Цитата:

Сообщение от konan (Сообщение 147380)
В Firefox как то некорректно срабатывает скрол DIVa или вообще не срабатывает.

Проверяю в FireFox 8.0 -всё работает. Чтобы скроллер работал внутри дива (в примере их два) надо поставить фокус на этот DIV, т.е. кликнуть мышкой. Чтобы в другом - кликнуть по другому.

konan 03.01.2012 12:27

Цитата:

Сообщение от Маэстро (Сообщение 147416)
Проверяю в FireFox 8.0 -всё работает. Чтобы скроллер работал внутри дива (в примере их два) надо поставить фокус на этот DIV, т.е. кликнуть мышкой. Чтобы в другом - кликнуть по другому.

Да, так и есть. Только мне надо было при наведении, но уже нашел и поменял это событие.
Спасибо за помощь!

Маэстро 03.01.2012 12:41

Цитата:

Сообщение от konan (Сообщение 147806)
...мне надо было при наведении, но уже нашел и поменял это событие.

"при наведении" - я тоже делал так сначала. Но опытная эксплуатация продукта покзала, что большей части пользователей это не понравилось. Почему? -Пользователь как бы рассеянный. Он не замечает, что указатель мыши иногда уплывает в сторону (от DIV_а) и не понимает, почему колесико мышки не работает. При этом пользователь думает: я же кликунул (активизировал/сфокусировал) этот DIV - значит колесо должно работать! Так что осторожно в выборе режима работы, особенно, когда на экране много скроллируемых элементов.

konan 03.01.2012 14:45

интересное замечание. Может и правда надо будет вернуть. Но в моем случае один скролируемый див, в котором элементы при наведении подсвечиваются, т.е видно что он активный при наведении.

Еще пришлось подправить вот здесь:

if (d1.f)
{
if (delta == 1)
{if (d1.scrollTop == 0) return cancelEvent(event)}
else {if (d1.scrollTop == d1.scrollHeight-200) return cancelEvent(event)};
};
т.к. содержимое дива растет со временем.
200 - высота дива

P.S. интересно увидеть реализацию на jQuery


Часовой пояс GMT +3, время: 13:36.