Auto scroll div based on mouse position

Question

I want to automatically scroll a div based on mouse position using jQuery.

If you see this fiddle here, you can see a number of images that are horizontally ordered in a

Answer 1

A slightly different way to achieve what you need:

jQuery(function($) {

  $(window).load(function() {

    var $gal = $("#propertyThumbnails"),
      galW = $gal.outerWidth(true),
      galSW = $gal[0].scrollWidth,
      wDiff = (galSW / galW) - 1, // widths difference ratio
      mPadd = 60, // Mousemove Padding
      damp = 20, // Mousemove response softness
      mX = 0, // Real mouse position
      mX2 = 0, // Modified mouse position
      posX = 0,
      mmAA = galW - (mPadd * 2), // The mousemove available area
      mmAAr = (galW / mmAA); // get available mousemove fidderence ratio

    $gal.mousemove(function(e) {
      mX = e.pageX - $(this).offset().left;
      mX2 = Math.min(Math.max(0, mX - mPadd), mmAA) * mmAAr;
    });

    setInterval(function() {
      posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"	
      $gal.scrollLeft(posX * wDiff);
    }, 10);

  });

});

#parent {
  position: relative;
  margin: 0 auto;
  width: 60%;
  height: 260px;
}

#propertyThumbnails {
  position: relative;
  overflow: hidden;
  background: #444;
  width: 100%;
  height: 262px;
  white-space: nowrap;
}

#propertyThumbnails img {
  vertical-align: middle;
  height: 100%;
  display: inline;
  margin-left: -4px;
}

where mPadd is the area (in PX, at the left and right border zone) without any sensitivity to prevent user frustrations :)