Scroll

Scroll on mouse move

by pollo

HTML

<div id="itemList">
       <ul>
          <li>first item</li>
          <li>second item</li>
          <li>third item</li>
          <li>fourth item</li>
          <li>fifth item</li>
          <li>sixth item</li>
          <li>first item</li>
          <li>second item</li>
          <li>third item</li>
          <li>fourth item</li>
          <li>fifth item</li>
          <li>sixth item</li>
           <li>first item</li>
          <li>second item</li>
          <li>third item</li>
          <li>fourth item</li>
          <li>fifth item</li>
          <li>sixth item</li>
          <li>first item</li>
          <li>second item</li>
          <li>third item</li>
          <li>fourth item</li>
          <li>fifth item</li>
          <li>sixth item</li>
          <li>first item</li>
          <li>second item</li>
          <li>third item</li>
          <li>fourth item</li>
          <li>fifth item</li>
          <li>sixth item</li>
          <li>first item</li>
          <li>second item</li>
          <li>third item</li>
          <li>fourth item</li>
          <li>fifth item</li>
          <li>sixth item</li>
        </ul>
</div>

JavaScript

var $gal   = $("#itemList"),
			galH   = $gal.outerHeight(true),
			galSh  = $gal[0].scrollHeight,
			hDiff  = (galSh/galH)-1,  // widths difference ratio
			mPadd  = 60,  // Mousemove Padding
			damp   = 20,  // Mousemove response softness
			mX     = 0,   // Real mouse position
			mX2    = 0,   // Modified mouse position
			posY  = 0,
			mmAA   = galH-(mPadd*2), // The mousemove available area
			mmAAr  = (galH/mmAA);    // get available mousemove fidderence ratio

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

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