Вам бонус- начислено 1 монета за дневную активность. Сейчас у вас 1 монета

Пример dragscroll удержание мышкой и перетаскивание прокрутки. JavaScript Scroll by Dragging

Лекция



Привет, Вы узнаете о том , что такое dragscroll удержание мышкой, Разберем основные их виды и особенности использования. Еще будет много подробных примеров и описаний. Для того чтобы лучше понимать что такое dragscroll удержание мышкой, перетаскивание прокрутки javascript scroll by dragging , настоятельно рекомендую прочитать все из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend).

 

Поведение по умолчанию браузеров совместимы для прокрутки с помощью колеса мыши или с помощью клавиш со стрелками. Скроллинг как по горизонтали, так и по вертикали не представляется возможным, удерживая страницу как перетащить объект (как правило, в мобильных телефонах). Колесо мыши не лучший вариант для мобильных устройств, где пользователь должен двигаться вверх-вниз, влево-вправо с помощью прикосновения.

Сделайте свой контент как в  Google Maps

Во время проверки Google Maps вы заметили вы можете перетащить с помощью мыши. Перетащите прокрутки JS позволяет перетаскивать содержимое страницы, удерживая кнопку мыши. DragScroll позволяет перетащить страницы по горизонтали и по вертикали с помощью мыши.

Этот скрипт применяе к элементам орезанным  overflow и назначенным классами  dragscroll перетаскивание мышкой.

он не имеет зависимостей и написан на чистом JavaScript. чтобы обновить поиск элементов dragscroll нужно вызвать  dragscroll.reset()

Можно также добавить nochilddrag атрибут к прокручиваемому  элементу, который будет давать   возможность перетащить прокрутки для самого элемента, но не для его потомков . Это может быть полезно, если вы хотите , чтобы включить прокручивающееся область путем перетаскивания его пустое пространство, но сохранить возможность выбрать текст

 

так же лучше добавить CSS стиль

.dragscroll {
cursor: -webkit-grab; 
cursor: -moz-grab;
cursor: -o-grab;
cursor: grab;

Пример dragscroll удержание мышкой и  перетаскивание прокрутки. JavaScript Scroll by Dragging

(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 удержание мышкой
создано: 2016-11-04
обновлено: 2021-03-13
132546



Рейтиг 9 of 10. count vote: 2
Вы довольны ?:


Найди готовое или заработай

С нашими удобными сервисами без комиссии*

Как это работает? | Узнать цену?

Найти исполнителя
$0 / весь год.
  • У вас есть задание, но нет времени его делать
  • Вы хотите найти профессионала для выплнения задания
  • Возможно примерение функции гаранта на сделку
  • Приорететная поддержка
  • идеально подходит для студентов, у которых нет времени для решения заданий
Готовое решение
$0 / весь год.
  • Вы можите продать(исполнителем) или купить(заказчиком) готовое решение
  • Вам предоставят готовое решение
  • Будет предоставлено в минимальные сроки т.к. задание уже готовое
  • Вы получите базовую гарантию 8 дней
  • Вы можете заработать на материалах
  • подходит как для студентов так и для преподавателей
Я исполнитель
$0 / весь год.
  • Вы профессионал своего дела
  • У вас есть опыт и желание зарабатывать
  • Вы хотите помочь в решении задач или написании работ
  • Возможно примерение функции гаранта на сделку
  • подходит для опытных студентов так и для преподавателей



Комментарии


Оставить комментарий
Если у вас есть какое-либо предложение, идея, благодарность или комментарий, не стесняйтесь писать. Мы очень ценим отзывы и рады услышать ваше мнение.
To reply

Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)

Термины: Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)