Лекция
Привет, Вы узнаете о том , что такое dragscroll удержание мышкой, Разберем основные их виды и особенности использования. Еще будет много подробных примеров и описаний. Для того чтобы лучше понимать что такое dragscroll удержание мышкой, перетаскивание прокрутки javascript scroll by dragging , настоятельно рекомендую прочитать все из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend).
Поведение по умолчанию браузеров совместимы для прокрутки с помощью колеса мыши или с помощью клавиш со стрелками. Скроллинг как по горизонтали, так и по вертикали не представляется возможным, удерживая страницу как перетащить объект (как правило, в мобильных телефонах). Колесо мыши не лучший вариант для мобильных устройств, где пользователь должен двигаться вверх-вниз, влево-вправо с помощью прикосновения.
Сделайте свой контент как в Google Maps
Во время проверки Google Maps вы заметили вы можете перетащить с помощью мыши. Перетащите прокрутки JS позволяет перетаскивать содержимое страницы, удерживая кнопку мыши. DragScroll позволяет перетащить страницы по горизонтали и по вертикали с помощью мыши.
Этот скрипт применяе к элементам орезанным overflow и назначенным классами dragscroll перетаскивание мышкой.
он не имеет зависимостей и написан на чистом JavaScript. чтобы обновить поиск элементов dragscroll нужно вызвать dragscroll.reset()
Можно также добавить nochilddrag атрибут к прокручиваемому элементу, который будет давать возможность перетащить прокрутки для самого элемента, но не для его потомков . Это может быть полезно, если вы хотите , чтобы включить прокручивающееся область путем перетаскивания его пустое пространство, но сохранить возможность выбрать текст
так же лучше добавить CSS стиль
| (function (root, factory) { | |
| if (typeof define === 'function' && define.amd) { | |
| define(['exports'], factory); | |
| } else if (typeof exports !== 'undefined') { | |
| factory(exports); | |
| } else { | |
| factory((root.dragscroll = {})); | |
| } | |
| }(this, function (exports) { | |
| var _window = window; | |
| var _document = document; | |
| var mousemove = 'mousemove'; | |
| var mouseup = 'mouseup'; | |
| var mousedown = 'mousedown'; | |
| var EventListener = 'EventListener'; | |
| var addEventListener = 'add'+EventListener; | |
| var removeEventListener = 'remove'+EventListener; | |
| var newScrollX, newScrollY; | |
| var dragged = []; | |
| var reset = function(i, el) { | |
| for (i = 0; i < dragged.length;) { | |
| el = dragged[i++]; | |
| el = el.container || el; | |
| el[removeEventListener](mousedown, el.md, 0); | |
| _window[removeEventListener](mouseup, el.mu, 0); | |
| _window[removeEventListener](mousemove, el.mm, 0); | |
| } | |
| // cloning into array since HTMLCollection is updated dynamically | |
| dragged = [].slice.call(_document.getElementsByClassName('dragscroll')); | |
| for (i = 0; i < dragged.length;) { | |
| (function(el, lastClientX, lastClientY, pushed, scroller, cont){ | |
| (cont = el.container || el)[addEventListener]( | |
| mousedown, | |
| cont.md = function(e) { | |
| if (!el.hasAttribute('nochilddrag') || | |
| _document.elementFromPoint( | |
| e.pageX, e.pageY | |
| ) == cont | |
| ) { | |
| pushed = 1; | |
| lastClientX = e.clientX; | |
| lastClientY = e.clientY; | |
| e.preventDefault(); | |
| } | |
| }, 0 | |
| ); | |
| _window[addEventListener]( | |
| mouseup, cont.mu = function() {pushed = 0;}, 0 | |
| ); | |
| _window[addEventListener]( | |
| mousemove, | |
| cont.mm = function(e) { | |
| if (pushed) { | |
| (scroller = el.scroller||el).scrollLeft -= | |
| newScrollX = (- lastClientX + (lastClientX=e.clientX)); | |
| scroller.scrollTop -= | |
| newScrollY = (- lastClientY + (lastClientY=e.clientY)); | |
| if (el == _document.body) { | |
| (scroller = _document.documentElement).scrollLeft -= newScrollX; | |
| scroller.scrollTop -= newScrollY; | |
| } | |
| } | |
| }, 0 | |
| ); | |
| })(dragged[i++]); | |
| } | |
| } | |
| if (_document.readyState == 'complete') { | |
| reset(); | |
| } else { | |
| _window[addEventListener]('load', reset, 0); | |
| } | |
| exports.reset = reset; | |
| })); |
просто вызовите этот скрипт. Об этом говорит сайт https://intellect.icu . если будет динамическое добавление или уделение класса
dragscroll то нужно вызывать dragscroll.reset()
Прочтение данной статьи про dragscroll удержание мышкой позволяет сделать вывод о значимости данной информации для обеспечения качества и оптимальности процессов. Надеюсь, что теперь ты понял что такое dragscroll удержание мышкой, перетаскивание прокрутки javascript scroll by dragging и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)
Из статьи мы узнали кратко, но содержательно про dragscroll удержание мышкой
Комментарии
Оставить комментарий
Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)
Термины: Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)