LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Click and drag to scroll!

(The Javascript way)

Setting our variables

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

Mouse down event

window.addEventListener('mousedown', function(e){ curDown = true; curYPos = e.pageY; curXPos = e.pageX; });

Mouse up event

window.addEventListener('mouseup', function(e){ curDown = false; });

Mouse move event

window.addEventListener('mousemove', function(e){ if(curDown === true){ window.scrollTo(document.body.scrollLeft + (curXPos - e.pageX), document.body.scrollTop + (curYPos - e.pageY)); } });
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;
}
JS
var curYPos, curXPos, curDown;

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

window.addEventListener('mousedown', function(e){ 
  curYPos = e.pageY; 
  curXPos = e.pageX; 
  curDown = true; 
});

window.addEventListener('mouseup', function(e){ 
  curDown = false; 
});
Host Instantly Drag and Drop Website Builder

 

Description

Original jQuery version: http://codepen.io/JTParrett/pen/uzGvy
Term
Mon, 11/27/2017 - 21:36

Related Codes

Pen ID
Pen ID
Pen ID