LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Click and drag to scroll!

(The jQuery way)

Setting our variables

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

Mouse down event

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

Mouse up event

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

Mouse move event

$(window).mousemove(function(m){ if(curDown === true){ $(window).scrollTop($(window).scrollTop() + (curYPos - m.pageY)); $(window).scrollLeft($(window).scrollLeft() + (curXPos - m.pageX)); } });
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
$(function(){
  var curDown = false,
      curYPos = 0,
      curXPos = 0;
  $(window).mousemove(function(m){
    if(curDown === true){
     $(window).scrollTop($(window).scrollTop() + (curYPos - m.pageY)); 
     $(window).scrollLeft($(window).scrollLeft() + (curXPos - m.pageX));
    }
  });
  
  $(window).mousedown(function(m){
    curDown = true;
    curYPos = m.pageY;
    curXPos = m.pageX;
  });
  
  $(window).mouseup(function(){
    curDown = false;
  });
})
Host Instantly Drag and Drop Website Builder

 

Description

Improved Javascript version: http://codepen.io/JTParrett/pen/rkofB
Term
Mon, 11/27/2017 - 21:47

Related Codes

Pen ID
Pen ID
Pen ID