浏览器滚动条滑动 by 彭成刚 20120917 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>浏览器滚动条滑动 by 彭成刚 20120917</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script>
$(window).scroll( function(e)
  { 
   });
   
   $(window).mousedown( function(e)
   {
       e = e || window.event;
       
       if("[object HTMLHtmlElement]" == e.target)//当鼠标点击滚动条的时候 清空动画
       {
           //alert(e.target);
           clearInterval(intervalID);
       }
       
    });
var upOrDown = null;
var intervalID = null;
function bindgundong()
{
    var isFF = navigator.userAgent.toLowerCase().indexOf("firefox")>=0;
    
     if (isFF)
     {
          window.addEventListener('DOMMouseScroll', function (e)
        {
             upOrDown = e.detail < 0 ? "up" : "down";
            scrollHander();
            e.preventDefault();
        }, false);
      
      } else {
        window.onmousewheel = document.onmousewheel = function (e)
        {
             e = e || window.event;
            upOrDown = e.wheelDelta > 0 ? "up" : "down";
            scrollHander();
            e.returnValue = false;
         }
      }
}
function scrollHander()
{
    clearInterval(intervalID);
    var tar = $(window).scrollTop() + 180 * (upOrDown == "up" ? -1 : 1);
    intervalID = setInterval(function ()
    {
        $(window).scrollTop($(window).scrollTop() + (tar - $(window).scrollTop()) * 0.1);
        if (tar == $(window).scrollTop())
        {
            clearInterval(intervalID);
        }
    }, 10);
}

$(window).ready(function(){
  // 在这里写你的代码...
  bindgundong();

});

</script>
</head>

<body>
<div id="nlog" style=" position:fixed; left:0; top:0;">当前位置：1</div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>

</body>
</html>
posted @ 2012-09-17 16:29  彭成刚  阅读(206)  评论(0)  编辑  收藏  举报