title: Horizontal scroll on mouseMove - wide div in smaller div with overflow:hidden (Can't get the math to work)
body: <p>I'm trying to make a "line" of image thumbs, where it scrolls on mousemove. And I got it to work, but my problem now is that i wanted to make a "padding" on the sides so I doesn't have to have the mouse all the way out to the sides to see the first/last thumb. But I really really can't get it to work :/</p>
  
  <p>This is the script I have now:</p>
  
  <pre><code>// MouseMove scrolling on thumbs
  var box = $('.thumbs-block'),
      innerBox = $('.thumbs'),
      lastElement = innerBox.find('a:last-child');
  
  var offsetPx = 100;
  var boxOffset = box.offset().left;
  
  var boxWidth = box.width() /* - (offsetPx*2)*/;
  var innerBoxWidth = (lastElement[0].offsetLeft + lastElement.outerWidth(true)) - boxOffset /* + (offsetPx*2)*/;
  
  scrollDelayTimer = null;
  box.mousemove(function (e) {
      console.log('boxWidth: ' + boxWidth + '   innerBoxWidth: ' + innerBoxWidth + '   box.scrollLeft(): ' + box.scrollLeft());
  
      var mouseX = e.pageX;
      var boxMouseX = mouseX - boxOffset;
  
      if ((boxMouseX &gt; offsetPx) &amp;&amp; (boxMouseX &lt; (boxWidth - offsetPx))) {
          var left = (boxMouseX * (innerBoxWidth - boxWidth) / boxWidth) /* - offsetPx*/;
  
          clearTimeout(scrollDelayTimer);
          scrollDelayTimer = setTimeout(function () {
              scrollDelayTimer = null;
              box.stop().animate({
                  "scrollLeft": left
              }, {
                  queue: false,
                  duration: 500,
                  easing: 'linear'
              });
          }, 10);
      }
  });
  </code></pre>
  
  <p>There are some of the places I've tried adding the offset (commented out inline), some of it gets it working in one end but not the other :/</p>
  
  <p>I'm pretty sure it's a problem in the math, but I can't figure out what I should do :/</p>
  
  <p>Here's a jsFiddle: <a href="http://jsfiddle.net/6CJfs/1/" rel="noreferrer">http://jsfiddle.net/6CJfs/1/</a></p>
  
  <p>I hope I made my problem clear enough, not sure how to explain it otherwise, and hope someone can help :)</p>