Управление виджетом слайдер библиотеки jQuery UI при помощи колесика мыши
Дата публикации: 2012-10-22
От автора: в сегодняшнем уроке я хотел бы рассмотреть очень интересный плагин библиотеки jQuery под названием jquery.mousewheel, который позволяет совершать какие-то действия при вращении колесика мыши. Другими словами, он позволяет нам обрабатывать событие вращения колесика мыши по своему усмотрению.
В начале мы с Вами рассмотрим, где взять данный плагин и как с ним работать, а затем при помощи данного плагина научимся управлять виджетом слайдер библиотеки jQuery UI, то есть закрепим полученные знания на практике. Для этого мы с Вами возьмем исходные файлы из предыдущего урока (практическое применение виджета слайдер библиотеки jQuery UI), который мы с Вами проходили ранее.
1. Подготовка к уроку.
Для начала давайте возьмем исходные файлы к уроку — Практическое применение виджета слайдер библиотеки jQuery UI, который мы с Вами проходили ранее. Для тех, кто не смотрел данный урок и не понимает о чем сейчас идет речь, я настоятельно рекомендую посмотреть данный урок. Так как в сегодняшнем уроке я буду использовать некоторые понятия и переменные из прошлого урока.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Далее скопируем исходные файлы в отдельную папку на нашем локальном компьютере. Структура файлов и папок у Вас должна получиться вот такой:
Как Вы помните, в папке js у нас сохранены библиотеки jQuery и jQuery UI. Теперь давайте создадим новый файл под названием scroll.html, с вот таким кодом:
Как Вы видите это обычная html разметка, которая нам потребуется для демонстрации работы плагина jquery.mousewheel. Сперва подключаем библиотеку jQuery которая располагается в паке js. Далее создаем два блока div:
первый с идентификатором scroll – он нам потребуется для того чтобы только в этом блоке обрабатывать событие вращения колесика мыши;
второй с идентификатором result – в этот блока мы будем выводить различные вспомогательные результаты.
Затем создаем несколько абзацев p, для того что бы в браузере появилась полоса прокрутки. Это нам потребуется для тестирования работы плагина. Так как по умолчанию вращение колесика мыши приводит к перемещению полосы прокрутки. Мы это действие с Вами отменим и назначим другое, но об этом позже. А сейчас давайте перейдем в браузер и посмотрим, что у нас получилось:
Как видите, ничего сложного – два обычных блока и несколько строк с текстом для отображения полосы прокрутки.
2. Установка плагина mousewheel.
Скачать плагин mousewheel можно с официального сайта разработчика. Переходим на сайт и кликнем по ссылке Download.
Далее скачиваем последнюю стабильную версию. На момент записи урока – это версия mousewheel 3.0.6.
Затем распаковываем полученный архив. В получившейся папке после распаковки Вы увидите файл jquery.mousewheel.js – это и есть плагин mousewheel.
Далее копируем этот плагин в папку js, где располагаются библиотеки jQuery jQuery UI. И подключаем файл к нашему скрипту:
На этом установка плагина mousewheel завершена.
3. Основы работы с плагином.
Теперь, когда плагин установлен, можно начинать работать с ним.
Первое что мы сделаем – это отменим прокрутку страницы в браузере при помощи колеса мыши.
Для этого между тегами head вставляем следующий код:
Как обычно, начинаем работу с библиотекой jQuery, обращаясь к элементу нашей страницы document, и описанием функции в обработчике события ready(). Далее, обратите внимание, опять же обращаемся к элементу document и вызываем плагин mousewheel() (правильнее сказать вызываем основной метод плагина).
Работа этого метода заключается в отслеживании вращения колеса мыши. То есть, другими словами, как только произойдет вращение колеса мыши, выполнится функция описанная внутри метода mousewheel(). В функции, как Вы заметили, я указал переменную (параметр) event. В эту переменную попадет объект, содержащий данные о произошедшем событии. А произошедшее событие – это вращение колеса мыши.
Далее у объекта event есть метод preventDefault() – который отменяет действие по умолчанию. А действие по умолчанию для события вращения колеса мыши – это прокрутка контента в браузере. Поэтому вызываем этот метод и переходим в браузер. Теперь, смотрите, после обновления, если прокрутить колесо мыши, то прокрутки контента не произойдет. То есть мы это сделали, используя плагин mousewheel.
Теперь давайте реализуем, нечто вроде счетчика, который будет считывать вращение колеса мыши. Возвращаемся к открытому файлу scroll.html и вместо javascript кода, что мы только что с Вами разбирали, вставляем следующий код:
В начале, как Вы видите, все как обычно. Затем создаем переменную val – это и есть наш будущий счетчик. И записываем в него начальное значение, то есть 0. Далее вызываем плагин mousewheel. И описываем в нем функцию, которая выполнится при вращении колеса мыши. Обратите внимание, что в функции я указываю вторым параметром переменную delta. Эта переменная будет показывать нам направление вращения колеса мыши.
При положительном вращении – от себя, значение этой переменной будет больше нуля, при отрицательном – на себя – меньше нуля.
Это можно легко проверить, если сразу в теле функции вывести значение переменной с помощью функции alert(), а остальной код закомментировать:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Теперь если перейти в браузер то можно увидеть вот такую картину, при положительном вращении мыши (от себя):
Видно, да что значение переменной delta, установилось в 1. Теперь вращаем колесо мыши на себя:
Но возвращаемся к нашему коду. Теперь зная как ведет себя переменная delta при разных направлениях вращения мыши, мы можем составить две проверки (два условия if). Первое, если совершается положительное вращение, то мы переменную счетчика val будем увеличивать на единицу. И второе условие, если совершается отрицательное вращение, то переменную счетчика val будем уменьшать на единицу.
Далее просто выводим значение переменной val в блок div с идентификатором result, с помощью метода html(), который, напомню, позволяет вставлять данные в выбранные блок. Теперь переходим в браузер и смотрим, что у нас получилось.
Я думаю, Вы заметили, что при вращении колеса мыши от себя, значение счетчика увеличивается, а при вращении – на себя – уменьшается.
Но сейчас есть одно маленькое неудобство. Получается, что действие для колесика мыши мы с Вами описали, но при этом не работает перемещение полосы прокрутки при помощи колеса мыши. Нужно это исправить. Давайте сделаем так, что бы счетчик работал только тогда, когда курсор мыши находится над блоком с идентификатором scroll. Если же курсор находится в другом месте, то счетчик работать не должен, а вращение колеса мыши приводило бы к обычному результату, то есть перемещению полосы прокрутки.
Я думаю, Вы догадались, как это сделать, нужно просто плагин mousewheel вызывать у выбранного блока div с идентификатором scroll. То есть наш код нужно немного поправить, вот таким образом:
Теперь смотрите, когда курсор находится над блоком div, только тогда запускается плагин mousewheel и только тогда отменяется действие по умолчанию для колеса мыши.
4. Управление слайдером библиотеки jQuey UI колесиком мыши.
Теперь, когда мы научились работать с плагином mousewheel, предлагаю для закрепления знаний научиться управлять виджетом слайдер библиотеки jQuery UI. Открываем файл price.html.
Как Вы помните, в этом файле мы описывали небольшой блок для задания диапазона цен при помощи виджета слайдер. То есть мы создали блок, у которого диапазон цен можно было задавать при помощи двух ползунков. Вот на один из этих ползунков мы и «повесим» управление колесиком мыши. Я предлагаю это сделать только лишь для примера, для того что бы научиться работать с виджетом слайдер.
Итак, в файл price.html. вставляем следующий код (код вставляем в конец javascript кода, что мы описывали в прошлом уроке, но в теле функции jQuery):
Как обычно, первым делом необходимо вызвать плагин mousewheel, что мы и делаем для блока div с идентификатором options.
Далее получаем текущее значение правого ползунка и сохраняем в переменной value. Как Вы помните, для этого мы выбираем блок div с идентификатором slider_price и вызываем метод slider(). Далее этому методу передаем два параметра: первый «values» – означает, что мы хотим получить или установить значение ползунков слайдера (если передадим еще и третий параметр, то мы не получим значение, а установим новое), второй 1 – индекс (номер) ползунка, в нашем случае правый ползунок имеет номер 1.
Затем проверяем куда выполняется вращение колеса мыши, а также проверяем числовое значение ползунка слайдера, для того, чтобы не выйти за пределы максимального и минимального значения. Как Вы помните, мы в прошлом уроке, при описании слайдера, задавали два этих значения. Для положительного вращения максимальное значение не должно превышать 700, а для отрицательного – минимальное значение не должно быть меньше 100.
Далее в соответствии с направление вращения либо увеличиваем значение переменной value на единицу шага, либо уменьшаем. Шаг у нас равен 100, как Вы помните, мы его также задавали на прошлом уроке.
Затем устанавливаем новое значение ползунка слайдера, которое храниться в переменной value. Для этого используем уже знакомый нам метод slider(), и передаем ему третий параметр – переменную value.
Теперь осталось просто вывести новое значение ползунка слайдера на экран в текстовом поле с идентификатором price2. Что мы и делаем при помощи метода val(), параметром передаем ему переменную value.
Теперь давайте перейдем в браузер и посмотрим, что у нас получилось:
Как Вы видите, теперь, если навести курсор мыши на блок с диапазоном цен и вращать колесо мыши, то правый ползунок начинает перемещаться. Тем самым изменяя значение верхнего предела цены.
Далее давайте немного улучшим галерею изображений, которую мы делали на прошлом уроке. Как Вы помните, с помощью виджета слайдер выполнялась горизонтальная прокрутка изображений галереи. Я предлагаю сделать возможность горизонтальной прокрутки изображений при помощи колесика мыши.
Element: mousewheel event
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
The obsolete and non-standard mousewheel event is fired asynchronously at an Element to provide updates while a mouse wheel or similar device is operated. The mousewheel event was never part of any standard, and while it was implemented by several browsers, it was never implemented by Firefox.
Note: Instead of this obsolete event, use the standard wheel event.
The detail property
The value of the detail property is always zero, except in Opera, which uses detail similarly to the Firefox-only DOMMouseScroll event’s detail value, which indicates the scroll distance in terms of lines, with negative values indicating the scrolling movement is either toward the bottom or toward the right, and positive values indicating scrolling to the top or left.
Note: On macOS, the scroll distance (and therefore the value of detail ) is computed based on the accelerated scroll distance.
wheelDelta, wheelDeltaX and wheelDeltaY value
IE and Opera (Presto) only support wheelDelta attribute and do not support horizontal scroll.
The wheelDeltaX attribute value indicates the wheelDelta attribute value along the horizontal axis. When a user operates the device for scrolling to right, the value is negative. Otherwise, i.e., if it’s to left, the value is positive.
The wheelDeltaY attribute value indicates the wheelDelta attribute value along the vertical axis. The sign of the value is the same as the wheelDelta attribute value.
Internet Explorer
Chrome
On Mac, the value is complicated. The value is changed if the device that causes the native wheel event supports continuous scroll.
If the device supports continuous scroll (e.g., trackpad of MacBook or mouse wheel which can be turned smoothly), the value is computed from accelerated scroll amount. In this case, the value is the same as Safari.
If the device does not support continuous scroll (typically, old mouse wheel which cannot be turned smoothly), the value is computed from non-accelerated scroll amount (120 per notch). In this case, the value is different from Safari.
This difference makes a serious issue for web application developers. That is, web developers cannot know if mousewheel event is caused by which device.
See WebInputEventFactory::mouseWheelEvent of the Chromium’s source code for the detail.
Safari
The value is always computed from accelerated scroll amount. This is really different from other browsers except Chrome with continuous scroll supported device.
Opera (Presto)
On Windows, since the detail attribute value is computed from actual scroll amount, the value is different from other browsers except the scroll amount per notch is 3 lines in system settings or a page.
On Mac, the detail attribute value is computed from accelerated scroll amount of native event. The value is usually much bigger than Safari’s or Chrome’s value.
Расстановка точек над onmousewheel и немного о луковом супе
Я уже писал о своих экспериментах со скроллбарами на сайтах и в веб-приложениях, но эти опыты удались не вполне. Поэтому я пока оставил идею кастомизации скроллбаров, но решил досканально разобраться с событиями, вызываемыми прокруткой колеса мыши.
Итак, задача: реализовать реакцию на события прокрутки мышиного колеса над определённым блоком, то есть не трогая «родной» скролл окна браузера. Реализация должна быть кроссбраузерной и не использовать какие-либо фреймворки.
Забегая вперёд, скажу, что этот экперимент удался вполне, а итоговый результат работает во всех десктопных браузерах, начиная с IE7 (по идее, должно работать и в шестом, но сейчас нет возможности это проверить). Также, хочу выразить благодарность поисковой системе Гугл. Без неё жизнь была бы соткана из уныния и отчаяния.
Сначала я решил задачу ловли onmousewheel для всего окна (объекта window). Решилось так:
Первая строчка поймает событие в Firefox и веб-китовских браузерах (Chrome, Safari), вторая нужна для ловли в Опере и IE. Реакция на событие — функция mouse_wheel(), которая выглядит пока что следующим образом:
Программа минимум выполнена. Я ловлю событие прокрутки колеса мыши во всех браузерах и даже знаю в каком направлении крутится колесо. Едем дальше.
Теперь нужно поймать это событие над определённым блоком, а с ним уже что-то делать. Это может быть, например, та же прокрутка содержимого или регулятор громкости плеера. Я же, в качестве примера решил сделать эдакий colorpicker, в котором значения красной, зелёной или синей компоненты устанавливаются прокруткой колеса над соответствующим блоком. То есть, что-то в этом духе:
Действовать я решил самым простым и может даже слегка кондовым способом: завёл глобальную переменную wheel_handle (null или другое false-like значение по умолчанию), которой при событии onmouseover на определённом блоке будет присваиваться некая функция, определённая заранее. Выполняться функция будет при срабатывании onmousewheel и в качестве параметра в неё будет передаваться направление прокрутки. Код стал выглядеть так:
В принципе, всё должно быть понятно, но на всякий случай. Функция mouse_wheel при наличие direction и wheel_handle с типом «функция» исполняет функцию, которая присвоена wheel_handle. Функция же set_handle определяет, над какими блоками какую функцию исполнять. То есть, чуть забежав вперёд, для моего примера конструкция
будет означать, что при наведении мыши на блок с идентификатором «r», переменной wheel_handle присвоится функция set_red, которая с параметром direction будет выполнена в случае события onmousewheel.
Финкции вида set_* очевидны и, на мой взгляд в комментариях не нуждаются. А вот обратить внимание на стиль тэга body надо. Я задал 1000 пикселей высоты для того, чтобы страница гарантированно не поместилась в экран и у неё образовалась своя полоса прокрутки. Если запустить пример в таком виде то события onmousewheel на блоках-то работать будут, но при этом и сама страница будет прокручиться вниз. Перечитываю постановку задачи, вношу маленький штришок в функцию mouse_wheel();
preventDefault() нужен здесь для отмены события. Да и вообще он нужен для отмены события. Вобщем, процитирую я немного Гугла:
Если действие события можно отменить, метод preventDefault() объекта Event используется для отмены события. Это означает, что действие, выполняемое в конкретной реализации, при возникновении данного события выполняться не будет. Если на любой фазе развития события вызывается метод preventDefault(), событие отменяется. Действие, выполняемое этим событием по умолчанию, не выполняется. Вызов данного метода для события, которое нельзя отменить, не оказывает никакого влияния на дальнейшее выполнение события. После вызова метод preventDefault() будет действовать на всем протяжении дальнейшего распространения события. Метод preventDefault() можно вызывать на любой фазе потока события.
event.returnValue — это для IE, который о preventDefault() не знает.
Отменили естественную реакцию на событие — выполняем нашу функцию. Под Windows в восьмом Firefox я отметил не всегда корректное срабатывание preventDefault(). Хотя, может это и некоторая специфика onmouseenter, потому что было замечено, что некорректные срабатывания случаются, когда курсор находится на текстом в блоке. Если кто-нибудь в курсе этих катаклизмов, просветите, пожалуйста — здесь Гугл не помог.
Но, вобщем-то и всё. Исходный код для копипасты полностью:
NB! Ссылка на рабочий пример, дополненный с учётом советов уважаемых комментаторов
— исправлена привязка к «магическим константам»;
— добавлена возможность указать контекст вызова handle: функция привязки теперь выглядит как mousewheel.set_wheel_handle(id, func, context);
— всё, касающееся onmousewheel завёрнуто в библиотечку Mousewheel.js.
Приятного аппетита, вобщем. Конечно, приготовление занимает минимум 4 часа, но результат того стоит, уж поверьте. Да и вообще я усматриваю ряд общих черт между поварами и программистами, но об этом в следующий раз и, наверное всё-таки, в Хабраюморе.
Mousewheel js что это
jQuery Mouse Wheel Plugin
A jQuery plugin that adds cross-browser mouse wheel support with delta normalization.
In order to use the plugin, simply bind the mousewheel event to an element.
It also provides two helper methods called mousewheel and unmousewheel that act just like other event helper methods in jQuery.
Here is an example of using both the bind and helper method syntax:
The combination of browsers, operating systems, and devices offer a huge range of possible delta values. In fact if the user uses a trackpad and then a physical mouse wheel the delta values can differ wildly. This plugin normalizes those values so you get a whole number starting at +-1 and going up in increments of +-1 according to the force or acceleration that is used. This number has the potential to be in the thousands depending on the device. Check out some of the data collected from users here.
Getting the scroll distance
In some use-cases we prefer to have the normalized delta but in others we want to know how far the browser should scroll based on the users input. This can be done by multiplying the deltaFactor by the deltaX or deltaY event property to find the scroll distance the browser reported.
The deltaFactor property was added to the event object in 3.1.5 so that the actual reported delta value can be extracted. This is a non-standard property.
Building the code in the repo
The unit tests run by karma are very basic sanity checks; improvements welcome. To fully test the plugin, load test/index.html in each supported browser and follow the instructions at the top of the file after the unit tests finish.
About
A jQuery plugin that adds cross-browser mouse wheel support.
Scroll horizontally with mouse wheel: Vanilla JavaScript
Imagine scrolling down with the mouse-wheel or trackpad and that your page scrolls horizontally instead. Isn’t that cool? In this article we will take a look at how you could use vanilla Javascript to create such an interesting effect.
Creating some scrollable content
To start, we will write some HTML to set in place some content that requires some horizontal scroll.
The main element will be the scroll container. It is a going to be the element that a scrollbar is bound to as long as there is content that overflow it. As it is right now, there isn’t enough content to produce an overflow. So let’s fix this.
Making sure the content overflows
We will place each section aligned next to each other so the content overflows horizontally. We are trying to create something like this, where elements are overflowing the container and therefore we can create a horizontal scrollbar for them. You can have as many sections as you want.
And why not, we will also give each section a different background:
Using the mouse wheel or trackpad to scroll horizontally
What does this means? It means that now we will be able to gather information through JavaScript about the scrolling event, which is exactly what we need.
We need to know the direction the user is scrolling to and the amount they scrolled. So, how do we do it?
We will be using the deltaY property of the event object we get on the parameter ( evt ).
The wheel event has 4 properties, and deltaY represents the vertical scroll amount. So we will use exactly that same value to scroll the exact same amount but this time horizontally.
We will be updating the scrollLeft property of the scrollable container ( main ) so it scrolls it horizontally.
The deltaY property can be positive ore negative. When it is positive it means the user is scrolling up and when it is negative the user is scrolling down. So, in our case, when they scroll up we want to scroll left and when they scroll down we want to scroll right.
The scrollLeft property works exactly with the same idea in mind. When applied to a scrollable element, a negative value means we will be scrolling the scrollable element to the left and a positive one means we will be doing it on the opposite direction, to the right. So we basically assign the deltaY value to the scrollLeft property and we are ready to go!
Just one note. Do not confuse the wheel event with the mousewheel event, the latter of which has been deprecated.
Take a look at the following codepen, fork it and play around with the code to see if you can build a neat horizontally scrollable layout:
Stick to horizontal scrolling and resume normal scroll when finished
Perhaps you are wondering if you can apply the same technique with content before and after the horizontal scrollable element. So the horizontal scrolling element will stick on the viewport until we finish scrolling horizontally.
The answer is YES, you can. This way, the vertical scroll will seem to pause while we keep on scrolling horizontally. Once we are done scrolling vertical scroll will resume.
The trick is creating a sticky container with the height of the horizontal scrollable width. This will serve as a placeholder. It will stick to the top while the page scrolls the placeholder vertically without the user noticing, as we have a stick element taking the whole viewport. We will then use that scroll to apply it in our sticky element.
There’s a bit more JavaScript involved here. Here’s the full example:
You like scrolling effects?
Love exploring the different ways you can make users interact with your page? Then you are going to have to try out fullPage, it is one of those libraries that comes with a whole box of neat tricks and ways to implement commonly implemented scrolling effects. Whether it’s snap scrolling both horizontally or vertically, neatly triggering animations or conditionally changing styles it’s got you covered on all fronts.
With cross-browser compatibility (all the way back to IE11), superb documentation, and well-tested code it comes with support for your favorite front-end frameworks like React, Vue, or Angular and popular WordPress web builders like Gutenberg or Elementor.
Related articles
Join 2,000+ readers and learn something new every month!
