Desplazamiento horizontal por un DIV

[homeres]

Iniciado por marlanga

[url]https://jsfiddle.net/marlanga/aqdfL4gb/2[/url]

Código Javascript:

var Scroller = function(id) {
    this.parent = document.getElementById(id);
  this.child = this.parent.firstChild;
  
  this.clicked = false;
  this.x = 0;
  
  var up = function(evt) {
    if (this.clicked) {
        this.clicked = false;
    }
  }
  
  var down = function(evt) {
    this.clicked = true;
    this.x = evt.x;
  }
  
  var move = function(evt) {
    if (this.clicked) {
        var dx = this.x - evt.x;
      this.x = evt.x;
      this.parent.scrollLeft += dx;
    }
  }
  
  this.child.addEventListener('mousedown', down.bind(this));
  this.child.addEventListener('mouseup', up.bind(this));
  this.parent.addEventListener('mouseout', up.bind(this));
  this.child.addEventListener('mousemove', move.bind(this));
}
 
var scroll = new Scroller('slider');
 

Código HTML:

<div id="slider"><div></div></div>
 

Código CSS:

div#slider {width:400px; height:100px; border: 2px solid black; overflow:hidden;}
div#slider > div {width:2000px; height:100px;background: linear-gradient(to right, #ffffff 0%,#ff0000 100%);}
 

Me he probado y me he gustado.

¡Justo lo que necesitaba! ¡Lo has clavado!