如何通过单击和拖动身体来滚动网页,如触摸设备

Question

是否可以通过按住鼠标按钮并在主体上垂直或水平拖动来滚动网站(如触摸设备ipad).有没有办法实现这个请指导我.

谢谢

Answer 1

你可以试试overscroll插件.

而在这里,你可以找到更多的例子...

Answer 2

我遇到了这个方法,这个代码笔友好(它是纯粹的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" />