trafnar/gist:217720

## gistfile1.htm
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>test</title>
    <style type="text/css" media="screen">
      #scrollme{width:500px; height:300px; overflow:auto;}
      #scrollme ol{ width:3000;}
      #scrollme ol li{width:200px; height:200px; margin-right:10px; background-color:red; float:left;}
    </style>
    <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="jquery.mousewheel.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="jquery.scrollTo.js"></script>
    <script type="text/javascript" charset="utf-8">


      distance = 0;

      $(function(){
        // run this on load
        if(false)
        {

        scrollme = $('#scrollme');

        scrollme.bind('mousewheel', function(event, delta){

          total_width = parseInt($('ol', scrollme).css('width'));


          distance = Math.round(Math.abs(delta+distance))

          if(distance > ((total_width/100)-1))
            distance = ((total_width/100)-1)


          console.log(distance);

          scrollme.scrollTo((distance*100));

        });
        }

      })


      distance = 0;

      $(function(){

        // setup the outer and inner elements
        scrollme = $('#scrollme');
        width = parseInt($('#scrollme ol').css('width'));

        scrollme.bind('mousewheel', function(event, delta){
          //this stuff hapens whenever the wheel scrolls

          //determines the distance scrolled so far (we'll store this in distance, which is global)
          distance = Math.round((delta*50)+(distance))

          //store distance, but check that it's not larger than width or less than 0 (some things are inverted here)
          distance = (distance<= -width) ? -width : distance;
          distance = (distance>0) ? 0 : distance;

          // console.log(-distance);

          // do the scroll
          scrollme.scrollTo(-distance);


        })

      })


    </script>
  </head>
  <body>


    <div id="scrollme">
      <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ol>
    </div>

  </body>
</html>
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>test</title>
	<style type="text/css" media="screen">
	#scrollme{width:500px; height:300px; overflow:auto;}
	#scrollme ol{ width:3000;}
	#scrollme ol li{width:200px; height:200px; margin-right:10px; background-color:red; float:left;}
	</style>
	<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="jquery.mousewheel.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="jquery.scrollTo.js"></script>
	<script type="text/javascript" charset="utf-8">


	distance = 0;

	$(function(){
	// run this on load
	if(false)
	{

	scrollme = $('#scrollme');

	scrollme.bind('mousewheel', function(event, delta){

	total_width = parseInt($('ol', scrollme).css('width'));


	distance = Math.round(Math.abs(delta+distance))

	if(distance > ((total_width/100)-1))
	distance = ((total_width/100)-1)


	console.log(distance);

	scrollme.scrollTo((distance*100));

	});
	}

	})


	distance = 0;

	$(function(){

	// setup the outer and inner elements
	scrollme = $('#scrollme');
	width = parseInt($('#scrollme ol').css('width'));

	scrollme.bind('mousewheel', function(event, delta){
	//this stuff hapens whenever the wheel scrolls

	//determines the distance scrolled so far (we'll store this in distance, which is global)
	distance = Math.round((delta*50)+(distance))

	//store distance, but check that it's not larger than width or less than 0 (some things are inverted here)
	distance = (distance<= -width) ? -width : distance;
	distance = (distance>0) ? 0 : distance;

	// console.log(-distance);

	// do the scroll
	scrollme.scrollTo(-distance);


	})

	})




	</script>
	</head>
	<body>


	<div id="scrollme">
	<ol>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	</ol>
	</div>

	</body>
	</html>