Добрый вечер, разработчики и любители 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.