title: Scrolling not working in the mobile version
body: <p>I'm working on a Javascript project. I created a div with an overflow and I would scroll that div using the mouse only (without the bar). I followed <a href="http://jsfiddle.net/mattball/MP2cg/" rel="nofollow">this</a> working example both on the browser and both on the mobile versions. Here is my HTML code:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="scroller"&gt;
          ...  divs, boxes generated by jQuery ...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the CSS:</p>
  
  <pre><code>#wrapper {
  margin-left: 45px;
  position: absolute;
  width: 900px;
  overflow: hidden;
  }
  #scroller {
  width: 100%;
  height: 100px;
  margin: 0px auto;
  overflow: auto; 
  }
  </code></pre>
  
  <p>Now the problem is that this works on the browser but does not in the mobile (no scrolling).</p>
  
  <p>EDIT: </p>
  
  <pre><code>#scroller div.line {
  position: absolute;
  margin-left: 2.5px;
  margin-top: 39px;
  border-bottom: 3px solid;
  border-color: #dd4b39;
  }
  #scroller div.ranges {
  position: absolute;
  width: 90%;
  text-align:left;
  margin-left: 5px;
  margin-top: 70px;
  }
  #scroller box.range {
  position:absolute;
  display: inline-block;
  width: 30px;
  height: 15px;
  border-radius: 15%;
  -moz-box-shadow:0px 0px 10px 1px #777777;
  -webkit-box-shadow:0px 0px 10px 1px #777777;
  -ms-box-shadow:0px 0px 10px 1px #777777;
  -o-box-shadow:0px 0px 10px 1px #777777;
  box-shadow:0px 0px 10px 1px #777777;
  background-image: -ms-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
  background-image: -moz-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
  background-image: -o-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
  background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #A8A8A8), color-stop(1, #BFBFBF));
  background-image: -webkit-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
  background-image: linear-gradient(to bottom right, #A8A8A8 0%, #BFBFBF 100%);
  z-index: 2;
  }
  #scroller div.lrange {
  position:absolute;
  display: inline-block;
  width: 15px;
  height: 100px;
  margin-top: -70px;
  border-right: 1px dotted;
  border-color: #dd4b39;
  }
  #scroller div.circle_small {
  position: absolute;
  cursor: pointer;
  display: inline-block;
  margin: 0 3px;
  margin-top: 32.5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #CC3524;
  background: -webkit-linear-gradient(top, #d14836, #dd4b39);
  background: -moz-linear-gradient(top, #d14836, #dd4b39);
  background: -ms-linear-gradient(top, #d14836, #dd4b39);
  background: -o-linear-gradient(top, #d14836, #dd4b39);
  background: -linear-gradient(top, #d14836, #dd4b39);
  }
  #scroller div.circle_big {
  position: absolute;
  cursor: pointer;
  display: inline-block;
  margin: 0px 3px;
  width: 40px;
  height: 40px;
  margin-top: 20px;
  border-radius: 50%;
  background: #CC3524;
  background: -webkit-linear-gradient(top, #d14836, #dd4b39);
  background: -moz-linear-gradient(top, #d14836, #dd4b39);
  background: -ms-linear-gradient(top, #d14836, #dd4b39);
  background: -o-linear-gradient(top, #d14836, #dd4b39);
  background: -linear-gradient(top, #d14836, #dd4b39);
  }
  #scroller div.circle_label {
  cursor: pointer;
  text-align: center;
  font-size: 20px; 
  padding: 8px;
  }
  </code></pre>