Считаем пиксели в onwheel
Добрый вечер, разработчики и любители JavaScript.
Сразу ставлю вопрос по теме, существуют ли таблицы или инструкции объясняющие кол-во прокручиваемых пиксилей одного события wheel на системном скроле браузера? Зачем это нужно? Есть блок с высотой меньше чем его содержимое. В этом блоке выставляется вертикальный скролл, затем с помощью JS сдвигается на величину скролла, если сам скролл нельзя скрыть средствами CSS (в некоторых браузерах). Таким образом системный скролл работает но скрыт. Затем добавляется div в виде бегунка кастомного скрола, который надо привязать к скрытому системному. Отсюда выпадают вопросы, сколько пикселей прокручивается при 1 шаге события wheel? <div class="wrapper"> <div class="scroll_content"> <!-- Здесь очень длинный контент --> </div> </div> <style type="text/css"> .wrapper, .scroll_conten { position: relative; overflow: hidden; } .wrapper { margin: 0; padding: 0; border: 0; height: 230px; //Здесь любая видимая высота overflow-y: scroll; overflow-x: hidden; -ms-overflow-style: none; } .scroller_h_scroll::-webkit-scrollbar { width: 0; height: 0; } </style> Кое-что я об этом знаю. Получаем кроссобраузерно событие после обработчика: e = e ? e : window.event; Получаем число при прокрутке колесика мыши: var wheelData = e.deltaY || e.detail || e.wheelDelta; В wheelData, единственное, что можно точно определить, так это сторону, куда колесико мыши крутанули. Далее начинается зоопарк. Для IE[8-11] и Edge будет работать e.deltaY, и будет действительно показывать число прокрученных пикселей. Оно зависит от высоты окна браузера, тип float. Webkit браузеры, по крайней мере свежие версии GoogleChrome, Opera, Safari, Яндекс браузер - выдают значение по модулю 100, независимо от разрешения и размера окна браузера. FireFox выдает по модулю 3.При этом экспериментальным путем я выяснил что он тоже скролит по модулю на одно событие wheel 100 пикселей. Какие значения будут в Opera mini, айфонах, планшетах, при обработке touch событий - вообще не представляю. Решалась ли как то подобная проблема? В приоритете чистый JavaScript можно по стандарту ES6. |
|
Цитата:
|
TommyWork,
http://learn.javascript.ru/mousewheel Цитата:
|
Цитата:
|
TommyWork,
ок, видимо не понимаю вашей проблемы, но может взять готовый плагин, которых много https://nicescroll.areaaperta.com/ |
Цитата:
e.preventDefault(); Затем скролить самому на сколько угодно? wheelData > 0 ? wheelData = 1 : wheelData = -1; $(this).scrollTop($(this).scrollTop() + 100 * wheelData); scroll.style.top = $(this).scrollTop() + 'px'; Так? |
TommyWork,
да, алгоритм именно такой, 100 наверно много |
|
Часовой пояс GMT +3, время: 03:24. |