A Pen by Josh Parrett.

index.html

<header>
  <h1>Click and drag to scroll!</h1>
  <p class="belowHeader">(The Javascript way)</p>
</header>

<div class="section dark">
  <div class="wrapper">
    <h2>Setting our variables</h2>
    <div class="code">
      var curXPos = 0, curYPos = 0, curDown = false;
    </div>
  </div>
</div>

<div class="section">
  <div class="wrapper">
    <h2>Mouse down event</h2>
    <div class="code"> window.addEventListener('mousedown', function(e){ curDown = true; curYPos = e.pageY; curXPos = e.pageX; });
    </div>
  </div>
</div>

<div class="section dark">
  <div class="wrapper">
    <h2>Mouse up event</h2>
    <div class="code">
window.addEventListener('mouseup', function(e){ curDown = false; });
    </div>
  </div>
</div>

<div class="section">
  <div class="wrapper">
    <h2>Mouse move event</h2>
    <div class="code">
window.addEventListener('mousemove', function(e){ 
  if(curDown === true){
    window.scrollTo(document.body.scrollLeft + (curXPos - e.pageX), document.body.scrollTop + (curYPos - e.pageY));
  }
});
    </div>
  </div>
</div>

Javascript-click-and-drag-scroll.markdown

Javascript click and drag scroll

Original jQuery version: http://codepen.io/JTParrett/pen/uzGvy

A Pen by Josh Parrett on CodePen.

License.

script.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; });

style.css

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
  font-family: segoe ui, helvetica neue, helvetica, arial, sans-serif;
  -webkit-user-select: none;
  -moz-user-select: moz-none;
  -ms-user-select: none;
  user-select: none;
}

/* Defaults */
body {
  font-size: 16px;
}

p, a, span {
  font-size: 90%;
  color: #666;
  liine-height: 20px;
}

.wrapper {
  width: 540px;
  margin: 0px auto;
}

/* Header */
header {
  padding: 120px 0px 120px 0px;
}

header h1 {
  font-size: 220%;
  color: #444;
  text-align: center;
}

header p {
  text-align: center;
}

/* Section */
.section {
  padding: 40px 0px 40px 0px;
}

.section.dark {
  background: #dedede;
}

.section h2 {
  color: #444;
  padding-bottom: 20px;
}

/* Code */
.code {
  padding: 20px;
  background: #dedede;
  color: #666;
}

.section.dark .code {
  background: #ccc;
}