Как прокрутить веб-страницу, нажав и перетащив на теле, как сенсорное устройство - PullRequest
Новая
       3

Как прокрутить веб-страницу, нажав и перетащив на теле, как сенсорное устройство

3 голосов
/ 20 января 2011

Можно ли прокрутить сайт, удерживая кнопку мыши и перетаскивая его вертикально или горизонтально по корпусу (как у сенсорных устройств ipad). Есть ли способ реализовать это, пожалуйста, направьте меня.

Спасибо

Ответы [ 2 ]

13 голосов
/ 20 января 2011

Вы можете попробовать overscroll плагин.

И здесь вы можете найти больше примеров ...

5 голосов
/ 15 июля 2015

Я сталкивался с этим методом, любезно предоставил этот кодовый блок (Это чистый JS, но имеет некоторые недостатки)

Я переписал его с помощью JQuery и отредактировал, чтобы устранить проблемы с браузером (расстояния прокрутки, полученные из document, а не body), и включил preventDefault, поскольку это устраняет проблему, когда перетаскивание иногда продолжалось после мышь отпущена. 

var curYPos = 0;
var curXPos = 0;
var curDown = false;

$(document).on("mousemove", function (event) {
  if (curDown === true) {
    $(document).scrollTop(parseInt($(document).scrollTop() + (curYPos - event.pageY)));
    $(document).scrollLeft(parseInt($(document).scrollLeft() + (curXPos - event.pageX)));
  }
});

$(document).on("mousedown", function (e) { curDown = true; curYPos = e.pageY; curXPos = e.pageX; e.preventDefault(); });
$(window).on("mouseup", function (e) { curDown = false; });
$(window).on("mouseout", function (e) { curDown = false; });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://miriadna.com/desctopwalls/images/max/Ideal-landscape.jpg" />

Чистый JS оригинал (довольно сломанный, но включен для справки): 

var curYPos = 0,
  curXPos = 0,
  curDown = false;

window.addEventListener('mousemove', function(e) {
  if (curDown === true) {
    window.scrollTo(document.body.scrollLeft + (curXPos - e.pageX), document.body.scrollTop + (curYPos - e.pageY));
  }
});

window.addEventListener('mousedown', function(e) {
  curDown = true;
  curYPos = e.pageY;
  curXPos = e.pageX;
});
window.addEventListener('mouseup', function(e) {
  curDown = false;
});
<img src="http://miriadna.com/desctopwalls/images/max/Ideal-landscape.jpg" />
...