Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.08.2017, 00:36
Интересующийся
Отправить личное сообщение для TommyWork Посмотреть профиль Найти все сообщения от TommyWork
 
Регистрация: 12.04.2017
Сообщений: 15

Считаем пиксели в 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.
Ответить с цитированием
  #2 (permalink)  
Старый 03.08.2017, 01:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,204

TommyWork,
узнаёте направление скрола и скролите на сколько вам нужно.
строка 83 тут

Последний раз редактировалось рони, 03.08.2017 в 01:37.
Ответить с цитированием
  #3 (permalink)  
Старый 03.08.2017, 01:44
Интересующийся
Отправить личное сообщение для TommyWork Посмотреть профиль Найти все сообщения от TommyWork
 
Регистрация: 12.04.2017
Сообщений: 15

Сообщение от рони Посмотреть сообщение
TommyWork,
узнаёте направление скрола и скролите на сколько вам нужно.
строка 83 тут
Скролить ничего не надо, есть системный скрытый скролл, нужно понять сколько пикселей он скролит, для отображения кастомного скроллбара
Ответить с цитированием
  #4 (permalink)  
Старый 03.08.2017, 01:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,204

TommyWork,
http://learn.javascript.ru/mousewheel
Цитата:
В свойстве wheelDelta – условный «размер прокрутки», обычно равен 120 для прокрутки вверх и -120 – вниз. Он не соответствует какому-либо конкретному количеству пикселей.
Ответить с цитированием
  #5 (permalink)  
Старый 03.08.2017, 01:47
Интересующийся
Отправить личное сообщение для TommyWork Посмотреть профиль Найти все сообщения от TommyWork
 
Регистрация: 12.04.2017
Сообщений: 15

Сообщение от рони Посмотреть сообщение
TommyWork,
http://learn.javascript.ru/mousewheel
Именно это я и описал выше, читайте перед тем как писать ответ
Ответить с цитированием
  #6 (permalink)  
Старый 03.08.2017, 01:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,204

TommyWork,
ок, видимо не понимаю вашей проблемы, но может взять готовый плагин, которых много https://nicescroll.areaaperta.com/
Ответить с цитированием
  #7 (permalink)  
Старый 03.08.2017, 02:05
Интересующийся
Отправить личное сообщение для TommyWork Посмотреть профиль Найти все сообщения от TommyWork
 
Регистрация: 12.04.2017
Сообщений: 15

Сообщение от рони Посмотреть сообщение
TommyWork,
ок, видимо не понимаю вашей проблемы, но может взять готовый плагин, которых много https://nicescroll.areaaperta.com/
Вы предлагаете по событию wheel, перехватить действия по событию по умолчанию
e.preventDefault();

Затем скролить самому на сколько угодно?
wheelData > 0 ? wheelData = 1 : wheelData = -1;
	$(this).scrollTop($(this).scrollTop() + 100 * wheelData);
	scroll.style.top = $(this).scrollTop() + 'px';


Так?
Ответить с цитированием
  #8 (permalink)  
Старый 03.08.2017, 02:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,204

TommyWork,
да, алгоритм именно такой, 100 наверно много
Ответить с цитированием
  #9 (permalink)  
Старый 03.08.2017, 02:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,204

TommyWork,
http://manos.malihu.gr/repository/cu..._examples.html
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Считать пиксели с определенного блока, а не со всего экрана Максим_M Элементы интерфейса 0 15.12.2013 13:55
Из процентов в пиксели и наоборот. Valdemor Events/DOM/Window 1 13.08.2013 11:11
Пиксели на изображении (background-image) sariman jQuery 2 22.06.2013 22:47
Как перевести pt, em и пр. в пиксели Антон Крамолов Общие вопросы Javascript 5 31.07.2012 09:09
Выбитые пиксели на фотографиях smirnov-mn Internet Explorer 1 14.03.2012 18:29