首页 > 代码库 > javascript 实现模拟滚动条,但不支持鼠标滚轮

javascript 实现模拟滚动条,但不支持鼠标滚轮

模拟滚动条做项目的时候,很多时候会用到,所以就写了一个这么模拟滚动条,但是不支持滚轮事件

 

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

 

<style>

 

*{padding:0;margin:0;}

.scroll{width:320px;margin:30px auto;}

#boxWrap{width:300px;border:1px solid #ccc;height:400px;overflow: hidden;float:left;position:relative;}

#boxInner{position:absolute;}

#boxInner p{padding:5px; line-height:24px;text-indent:2em;}

#rollWrap{background:#ddd;height:400px;width:15px;float:right;position: relative;}

#rollInner{height:30px;width:100%;background:orange;position:absolute;cursor:pointer;}

 

</style>

 

<body>

    

    <div class="scroll">

 

        <div id="boxWrap">

            <div id="boxInner">

                <p>“瘾”为何物? “瘾”是一种走火入魔的状态,由灵魂而肉体,以至灵肉无间。会过瘾的人对唯物、唯心之辩的态度是付之一笑。过瘾的那一会儿,你就是个小神仙,无所不能,无我无他,无虚无实。

假如说生命有度,把心与身的存在状态从低到高排列成度数,那么“瘾”就是一种超乎正常的生命度。达到这种生命度安全又不碍别人事的方法挺多,但这些方法的假象是受罪。巨大的甜头就在那一点儿苦头后面。比如我酷爱长跑,要的是那终极的舒适,但那舒适的穿越几乎是以垂死的状态去获取的。

写作之于我,也是一种秘密的过瘾。谁都说呀,歇歇吧,写那么苦图什么?过去我和他们见识一样,也认为自己挺悲壮的,整天背对世界,背对许多人间乐事在那里写。现在我发现自己并不是这么回事,其实是在偷着乐。背对世界,把所有杂念排除,把精神凝聚到白热程度,把所有的敏感都唤起来,使感觉丰满到极致。于是乎一些意外的词汇、句子在纸上出来了,它们组成了人物细节、行为,再往前逼自己一步,再越过一点儿不适,就达到了那种极端的舒适,因为自由了,为所欲为了。要说活着,这儿,你就是个小神仙,无所不能,无我无他,无虚无实。

假如说生命有度,把心与身的存在状态从低到高排列成度数,那么“瘾”就是一种超乎正常的生命度。达到这种生命度安全又不碍别人事的方法挺多,但这些方法的假象是受罪。巨大的甜头就在那一点儿苦头后面。比如我酷爱长跑,要的是那终极的舒适,但那舒适的穿越几乎是以垂死的状态去获取的。

写作之于我,也是一种秘密的过瘾。谁都说呀,歇歇吧,写那么苦图什么?过去我和他们见识一样,也认为自己挺悲壮的,整天背对世界,背对许多人间乐事在那里写。现在我发现自己并不是这么回事,其实是在偷着乐。背对世界,把所有杂念排除,把精神凝聚到白热程度,把所有的敏感都唤起来,使感觉丰满到极致。于是乎一些意外的词汇、句子在纸上出来了,它们组成了人物细节、行为,再往前逼自己一步,再越过一点儿不适,就达到了那种极端的舒适,因为自由了,为所欲为了。要说活着,这时的我是活到了淋漓尽致。我试着不写,可是不行,就像没醒透似的。一连多日不写,就是一连多日半打盹儿地过活,新陈代谢都不对了。出去旅行,同行的有丈夫,有时还有其他朋友。我的写作让他们都很头疼,一些计划要根据我的时间表转。他们抱怨,问我几天不写死不死得了。我说不写就是让我身上有一块痒痒,又不让我挠。哪怕早起一两个小时,我也得把过瘾的时间留出来。对我来说,生命一天不达到那个浓度、烈度,没有</p>

            </div>

        </div>

       

       <div id="rollWrap">

           <div id="rollInner"></div>

       </div>

 

    </div>

 

</body>

 

</html>

 

<script>

    //获取相关的DOM元素

 with(document){

  var oBoxWrap = getElementById(‘boxWrap‘);

  //内容信息

  var oBoxInner = getElementById(‘boxInner‘);

 

  var oRollWrap = getElementById(‘rollWrap‘);

  //小滑块

  var oRollInner = getElementById(‘rollInner‘);

 }

 

 //具体使用那个小滑块来控制滚动的距离,那么拖拽的时候就必须是它在动

 

oRollInner.onmousedown = function(ev){

//事件兼容

var oEvent = ev || event;

//获取当前 滑块的 距离

var disY = oEvent.clientY - oRollInner.offsetTop;

  //IE兼容问题,下面是判断浏览器是否支持 setCapture 方法

  if (oRollInner.setCapture) {

  oRollInner.onmousemove = Move;

  oRollInner.onmouseup = MoveUp;

  }else{

  document.onmousemove = Move;

    document.onmouseup = MoveUp;

  }

  

  // 移动的函数

     function Move(ev){

 

    var oEvent = ev || event;

    //定义距离的变量

    var t = oEvent.clientY - disY;

 

    //防止滑块超出距离

    if (t < 0 ) {

 

    t = 0;

       //假如 t 大于 滚动条宽度的时候等于滚动条宽度值

    }else if ( t > oRollWrap.offsetHeight - oRollInner.offsetHeight ){

 

        t =  oRollWrap.offsetHeight - oRollInner.offsetHeight;

    }

 

    oRollInner.style.top = t +‘px‘;

        

         // t值 除去 滚动框的高度 减去 滚动条的高度 得到 百分值

         var scale = t / ( oRollWrap.offsetHeight - oRollInner.offsetHeight );

         

         //里面的内容滚动 ( 外面DIV高度 - 里面DIV高度 ) * 百分值 得到负数

         oBoxInner.style.top =  ( oBoxWrap.offsetHeight - oBoxInner.offsetHeight ) * scale +‘px‘;

         

         //显示百分值

         document.title = scale;

    }

 

    //抬起的函数

   function MoveUp(){

       

      this.onmousemove = null;

      this.onmouseup = null;

     //IE 下 独有的

      if (oRollInner.releaseCapture) {

           oRollInner.releaseCapture();

      };

      

   }

 

 //IE 下  setCapture(); 阻止默认事件

  if (oRollInner.setCapture) {

    oRollInner.setCapture();

  }

    return false; 

 

}

 

</script>