Scrolling using javascript

Question

I want to scroll using 'mouseup','mousedown' & 'mousemove' events in a desktop website, something similar to how we do touch and scroll up/down on a mobile device. I dont want to use any plugin to achieve this nor I wanna use a mouse wheel.

Solution would be really appreciated. I wanna touch and scroll up/down in a desktop site using javascript.

HTML:

<ul>
<li>Title 1</li>
<li>Title 2</li>
<li>Title 3</li>
<li>Title 4</li>
<li>Title 5</li>
<li>Title 6</li>
<li>Title 7</li>
<li>Title 8</li>
<li>Title 9</li>
<li>Title 10</li>
<li>Title 11</li>
<li>Title 12</li>
<li>Title 13</li>
<li>Title 14</li>
<li>Title 15</li>
<li>Title 16</li>
<li>Title 17</li>
</ul>

CSS:

ul{list-style:none;padding:0;margin:0;height:400px;overflow-y:auto;}
ul li{padding:12px;border-bottom:1px solid #000;}

PFB the same for JSFIddle,

https://jsfiddle.net/c6w0nsgf/

So you want to scroll the page down when the mouse moves down, and scroll the page up when the mouse moves up? — SISYN, Feb 25 '16 at 18:14
I think you should take a look at Rory McCrossans solution over here: http://stackoverflow.com/questions/19743228/scroll-the-page-on-drag-with-jquery — Sanderfish, Feb 25 '16 at 18:19
@Sanderfish Could you please help me with the below code, https://jsfiddle.net/c6w0nsgf/3/ — Manju, Feb 25 '16 at 19:07

score 1 · Accepted Answer · answered Feb 25 '16 at 18:47

check out my attempt https://jsfiddle.net/c6w0nsgf/1/

$(function(){
  var curDown = false,
      curYPos = 0,
      curXPos = 0;
  $("ul").mousemove(function(m){
    if(curDown === true){
     $("ul").scrollTop($("ul").scrollTop() + (curYPos - m.pageY)); 
     $("ul").scrollLeft($("ul").scrollLeft() + (curXPos - m.pageX));
    }
  });

  $("ul").mousedown(function(m){
    curDown = true;
    curYPos = m.pageY;
    curXPos = m.pageX;
  });

  $("ul").mouseup(function(){
    curDown = false;
  });
});

events utilized here are mousemove, mouseup and mousedown, to ensure all mouse events.

ul {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

used the above css in order to avoid selection of text while dragging.

score 0 · Answer 2 · edited May 23 '17 at 12:15

Use a combination of

Scroll to

and

mouse position

On mouse click, you'll need to put the current mouse position in a variable and start tracking the mouse movement. Then you calculate the y difference between the old position and the new and you can scroll accordingly. You can add a factor to your scrolling, for example, every time the mouse moves 4 pixels, scroll the page 1 pixel which will have a smoother look.

Scrolling using javascript

2 Answers2