网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文：

　

标题 JS模拟简易滚动条效果代码(附demo源码)
范文
    这篇文章主要介绍了JS模拟简易滚动条效果代码,可模拟出滚动条拖动显示的效果,涉及JavaScript鼠标事件的响应及页面元素运算的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    本文实例讲述了JS模拟简易滚动条效果的方法。分享给大家供大家参考，具体如下：
    使用Js模拟滚动条。简易模式，类似手机上常见的滚动条。
    效果如下：
    名单
    Js代码如下：
    var scrollMoveObj = null, scrollPageY = 0, scrollY = 0;
    var scrollDivList = new Array();
    // obj需要添加滚动条的对象 w滚动条宽度 className滚动条样式名称
    // obj元素 必须指定高度，并设置overflow:hidden;
    // 如要兼容IE6 必须给obj元素 指定 overflow:hidden; 
    function jsScroll(obj, w, className)
    {
      if(typeof(obj) == 'string')  {
        obj = document.getElementById(obj);
      }
      //当内容未超出现在高度时，不添加滚动条  
      if(!obj || obj.scrollHeight <= obj.clientHeight || obj.clientHeight == 0) {
        return;
      }
      obj.scrollBarWidth = w||6;
      obj.style.overflow = 'hidden';
      obj.scrollBar = document.createElement('div');
      document.body.appendChild(obj.scrollBar);
      obj.scrollBarIndex = document.createElement('div');
      obj.scrollBar.appendChild(obj.scrollBarIndex);
      obj.scrollBar.style.position = 'absolute';
      obj.scrollBarIndex.style.position = 'absolute';
      obj.scrollBar.className = className || '';
      if(!className) {
        obj.scrollBar.style.backgroundColor = '#ddd';
        obj.scrollBarIndex.style.backgroundColor = '#aaa';
      }
      scrollDivList.push(obj);
      scrollResetSize(obj);
      //使用鼠标滚轮滚动
      obj.scrollBar.scrollDiv = obj;
      obj.scrollBarIndex.scrollDiv = obj;
      obj.onmousewheel = scrollMove;
      obj.scrollBar.onmousewheel = scrollMove;
      obj.scrollBarIndex.onmousewheel = scrollMove;
      //拖动滚动条滚动
      obj.scrollBarIndex.onmousedown = function(evt){
        evt = evt || event;
        scrollPageY = evt.clientY;
        scrollY = this.scrollDiv.scrollTop;
        isScrollMove = true;
        document.body.onselectstart = function(){return false};
        scrollMoveObj = this.scrollDiv;
        if(this.scrollDiv.scrollBar.className == '') {
          this.scrollDiv.scrollBarIndex.style.backgroundColor = '#888';
        }
        return false;
      }
    }
    //当页面大小发生变化时，重新计算滚动条位置
    window.onresize = function(){
      for(var i=0; i<scrollDivList.length; i++) {
        scrollResetSize(scrollDivList[i]);
      }
    }
    //计算滚动条位置
    function scrollResetSize(o) {
      if(o.scrollHeight <= o.clientHeight) {
        o.scrollTop = 0;
        o.scrollBar.style.display = 'none';
      } else {
        o.scrollBar.style.display = 'block';
      }
      var x=0, y=0;
      var p = o;
      while(p) {
        x += p.offsetLeft;
        y += p.offsetTop;
        p = p.offsetParent;
      }
      var borderTop = parseInt(o.style.borderTopWidth||0);
      var borderBottom = parseInt(o.style.borderBottomWidth||0);
      o.scrollBar.style.width = o.scrollBarWidth + 'px';
      o.scrollBar.style.height = o.clientHeight + 'px';
      o.scrollBar.style.top = y + borderTop + 'px';
      o.scrollBar.style.left = x + o.offsetWidth - o.scrollBarWidth + 'px';
      o.scrollBarIndex.style.width = o.scrollBarWidth + 'px';
      var h = o.clientHeight - (o.scrollHeight - o.clientHeight);
      //当滚动条滑块最小20个像素
      if(h < 20) {
        h = 20;
      }
      o.scrollBarHeight = h;
      o.scrollBarIndex.style.height = h + 'px';
      o.scrollBarIndex.style.left = '0px';
      setScrollPosition(o);
    }
    function setScrollPosition(o) {
      o.scrollBarIndex.style.top = (o.clientHeight - o.scrollBarHeight) * o.scrollTop / (o.scrollHeight - o.clientHeight) + 'px';
    }
    document.documentElement.onmousemove = function(evt){
      if(!scrollMoveObj)return;
      evt = evt || event;
      var per = (scrollMoveObj.scrollHeight - scrollMoveObj.clientHeight) / (scrollMoveObj.clientHeight - scrollMoveObj.scrollBarHeight)
      scrollMoveObj.scrollTop = scrollY - (scrollPageY - evt.clientY) * per;
      setScrollPosition(scrollMoveObj);
    }
    document.documentElement.onmouseup = function(evt){
      if(!scrollMoveObj)return;
      if(scrollMoveObj.scrollBar.className == '') {
        scrollMoveObj.scrollBarIndex.style.backgroundColor = '#aaa';
      }
      scrollMoveObj = null;
      document.body.onselectstart = function(){return true};
    }
    // 鼠标滚轮滚动
    function scrollMove(evt){
      var div = this.scrollDiv || this;
      if(div.scrollHeight <= div.clientHeight) return true;
      evt = evt || event;
      var step = 20;
      if(evt.wheelDelta < 0) {
        if(div.scrollTop >= (div.scrollHeight - div.clientHeight)) return true;
        div.scrollTop += step;
      } else {
        if(div.scrollTop == 0) return true;
        div.scrollTop -= step;
      }
      setScrollPosition(div);
      return false;
    }
    希望本文所述对大家JavaScript程序设计有所帮助。
随便看

　

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/19 18:38:16