CODEWITHSUNDEEP
jqueryhtmltouch
KillerFish
KillerFish

Reputation: 5170

How to Scroll a webpage by clicking and Dragging on the Body like touch Device

Is it possible to scroll a website by holding mouse button down and Dragging vertically or horizontally on the body ( like touch devices ipad). Is there any way to implement this please guide me.

Thank You

Upvotes: 4

Views: 18996

Answers (2)

DBS
DBS

Reputation: 9984

I came across this method, courtesy of this codepen (It's pure JS, but has some flaws)

I've rewritten it with JQuery and edited it to fix the browser issues (Scroll distances retrieved from document not body), and included a preventDefault as this fixes an issue where the dragging occasionally continued after the mouse is released.

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="https://picsum.photos/id/10/1000/800" />

Pure JS original (Quite broken, but included for reference):

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="https://picsum.photos/id/10/1000/800" />

Upvotes: 5

Damiqib
Damiqib

Reputation: 1077

You could try overscroll plugin.

And here you can find more examples...

Upvotes: 13

Related Questions