自带的滚动调效果美观度实在差强人意,在一般美观度要求不高的网站还算是可以,但是如果美观度要求很高的话,那么就有点力不从心了,因为只有IE浏览器支持对滚动条的一些美化效果,如果想在谷歌或者火狐这样的浏览器也实现比较美观的效果,那么就需要模拟实现滚动条效果,下面是一段来自网络的代码实例和大家分享一下,代码如下:
   [ 其他 ] 运行代码    下载代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>51前端</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
#mainBox {
  width: 250px;
  height: 500px;
  border: 1px #bbb solid;
  position: relative;
  overflow: hidden;
  margin: 50px auto;
}
#content {
  height:1000px;
  position: absolute;
  left: 0;
  top: 0;
}
.scrollDiv {
  width: 6px;
  position: absolute;
  top: 0;
  background: #666;
  border-radius: 10px;
}
/* 章节类别 */ 
.m-catr {
  padding:15px 0 10px 12px;
  *padding:15px 0 10px 14px;
}
.m-catr .tte {
  float:left;
  line-height:35px;
  text-align:left;
  font-size:14px;
  font-weight:bold;
  color:#5b98db;
}
#content dl {
  width:225px;
  float:left;
  margin-top:10px;
}
#content dl dt, .m-catr dl dd {
  float:left;
  width:100%;
  line-height:25px;
  text-align:left;
  color:#444;
}
#content dl dt {
  font-weight:bold;
}
#content dl dd {
  margin-left:12px;
}
</style>
</head>
<body>
<div class="m-catr f-cb">
  <div id="mainBox">
    <div id="content">
      <dl data-type="menu">
        <dt>第一单元科学是系统化了的知识</dt>
        <dd> 1、千篇一律与千变万化</dd>
        <dd> 2、双语言时代</dd>
        <dd> 3、人们如何做出决策</dd>
        <dd> 4、培养独立工作和独立思考的人</dd>
      </dl>
      <dl data-type="menu">
        <dt>第二单元科学是系统化了的知识</dt>
        <dd> 1、千篇一律与千变万化</dd>
        <dd> 2、双语言时代</dd>
        <dd> 3、人们如何做出决策</dd>
        <dd> 4、培养独立工作和独立思考的人</dd>
      </dl>
      <dl data-type="menu">
        <dt>第三单元科学是系统化了的知识</dt>
        <dd> 1、千篇一律与千变万化</dd>
        <dd> 2、双语言时代</dd>
        <dd> 3、人们如何做出决策</dd>
        <dd> 4、培养独立工作和独立思考的人</dd>
      </dl>
      <dl data-type="menu">
        <dt>第四单元科学是系统化了的知识</dt>
        <dd> 1、千篇一律与千变万化</dd>
        <dd> 2、双语言时代</dd>
        <dd> 3、人们如何做出决策</dd>
        <dd> 4、培养独立工作和独立思考的人</dd>
      </dl>
      <dl data-type="menu">
        <dt>第五单元科学是系统化了的知识</dt>
        <dd> 1、千篇一律与千变万化</dd>
        <dd> 2、双语言时代</dd>
        <dd> 3、人们如何做出决策</dd>
        <dd> 4、培养独立工作和独立思考的人</dd>
      </dl>
    </div>
  </div>
</div>
<script type="text/javascript"> 
var doc=document; 
var _wheelData=-1; 
var mainBox=doc.getElementById('mainBox'); 
function bind(obj,type, handler) { 
  var node=typeof obj=="string"?$(obj):obj; 
  if(node.addEventListener) { 
    node.addEventListener(type,handler,false); 
  } 
  else if(node.attachEvent) { 
    node.attachEvent('on'+type,handler); 
  }
  else { 
    node['on'+type]=handler; 
  } 
} 
function mouseWheel(obj,handler) { 
  var node=typeof obj=="string"?$(obj):obj; 
  bind(node,'mousewheel',function(event) { 
    var data=-getWheelData(event); 
    handler(data); 
    if(document.all) { 
      window.event.returnValue=false; 
    } 
    else { 
      event.preventDefault(); 
    } 
  });
  bind(node,'DOMMouseScroll',function (event){ 
    var data=getWheelData(event); 
    handler(data); 
    event.preventDefault(); 
  }); 
  function getWheelData(event) { 
    var e=event||window.event; 
    return e.wheelDelta?e.wheelDelta:e.detail*40; 
  } 
} 
function addScroll() { 
  this.init.apply(this,arguments); 
} 
addScroll.prototype={ 
  init:function(mainBox, contentBox,className){ 
    var mainBox=doc.getElementById(mainBox); 
    var contentBox=doc.getElementById(contentBox); 
    var scrollDiv=this._createScroll(mainBox,className); 
    this._resizeScorll(scrollDiv,mainBox,contentBox); 
    this._tragScroll(scrollDiv,mainBox,contentBox); 
    this._wheelChange(scrollDiv,mainBox,contentBox); 
    this._clickScroll(scrollDiv,mainBox,contentBox); 
  }, 
  //创建滚动条 
  _createScroll:function(mainBox,className){ 
    var _scrollBox=doc.createElement('div'); 
    _scrollBox.setAttribute("id", "scrollBox"); 
    var _scroll = doc.createElement('div'); 
    var span = doc.createElement('span'); 
    _scrollBox.appendChild(_scroll); 
    _scroll.appendChild(span); 
    _scroll.className = className; 
    mainBox.appendChild(_scrollBox); 
    return _scroll; 
  }, 
  //调整滚动条 
  _resizeScorll:function(element,mainBox,contentBox){ 
    var p = element.parentNode; 
    var conHeight = contentBox.offsetHeight; 
    var _width = mainBox.clientWidth; 
    var _height = mainBox.clientHeight; 
    var _scrollWidth = element.offsetWidth; 
    var _left = _width - _scrollWidth; 
    p.style.width = _scrollWidth + "px"; 
    p.style.height = _height + "px"; 
    p.style.left = _left + "px"; 
    p.style.position = "absolute"; 
    p.style.background = "#ccc"; 
    contentBox.style.width = (mainBox.offsetWidth - _scrollWidth) + "px"; 
    var _scrollHeight = parseInt(_height * (_height / conHeight)); 
    if(_scrollHeight >= mainBox.clientHeight) 
    { 
      element.parentNode.style.display = "none"; 
    } 
    element.style.height = _scrollHeight + "px"; 
  }, 
  //拖动滚动条 
  _tragScroll:function(element,mainBox,contentBox){ 
    var mainHeight = mainBox.clientHeight; 
    element.onmousedown=function(event){ 
      var _this = this; 
      var _scrollTop = element.offsetTop; 
      var e = event || window.event; 
      var top = e.clientY; 
      //this.onmousemove=scrollGo; 
      document.onmousemove = scrollGo; 
      document.onmouseup = function (event) { 
      this.onmousemove = null; 
    } 
    function scrollGo(event) { 
      var e = event || window.event; 
      var _top = e.clientY; 
      var _t = _top - top + _scrollTop; 
      if(_t > (mainHeight - element.offsetHeight)) 
      { 
        _t = mainHeight - element.offsetHeight; 
      } 
      if(_t <= 0) 
      { 
        _t = 0; 
      } 
      element.style.top = _t + "px"; 
      contentBox.style.top = -_t * (contentBox.offsetHeight / mainBox.offsetHeight) + "px"; 
      _wheelData = _t; 
    } 
  } 
  element.onmouseover=function(){ 
    this.style.background = "#444"; 
  } 
  element.onmouseout=function(){ 
    this.style.background = "#666"; 
  } 
}, 
//鼠标滚轮滚动,滚动条滚动 
_wheelChange:function(element, mainBox,contentBox){ 
  var node=typeof mainBox=="string" ? $(mainBox):mainBox; 
  var flag = 0, rate = 0, wheelFlag = 0; 
  if (node) 
  { 
    mouseWheel(node, function (data) { 
      wheelFlag += data; 
      if(_wheelData >= 0) 
      { 
        flag = _wheelData; 
        element.style.top = flag + "px"; 
        wheelFlag = _wheelData * 12; 
        _wheelData = -1; 
      } 
      else 
      { 
        flag = wheelFlag / 12; 
      } 
      if(flag <= 0) 
      { 
        flag = 0; 
        wheelFlag = 0; 
      } 
      if(flag >= (mainBox.offsetHeight - element.offsetHeight)) 
      { 
        flag = (mainBox.clientHeight - element.offsetHeight); 
        wheelFlag = (mainBox.clientHeight - element.offsetHeight) * 12; 
      } 
      element.style.top = flag + "px"; 
      contentBox.style.top = -flag * (contentBox.offsetHeight / mainBox.offsetHeight) + "px"; 
    }); 
  } 
}, 
_clickScroll:function(element, mainBox, contentBox){ 
  var p = element.parentNode; 
  p.onclick = function (event) { 
    var e = event || window.event; 
    var t = e.target || e.srcElement; 
    var sTop=document.documentElement.scrollTop>0?document.documentElement.scrollTop:document.body.scrollTop; 
    var top = mainBox.offsetTop; 
    var _top = e.clientY + sTop - top - element.offsetHeight / 2; 
    if(_top <= 0) 
    { 
      _top = 0; 
    } 
    if(_top >= (mainBox.clientHeight - element.offsetHeight)) 
    { 
      _top = mainBox.clientHeight - element.offsetHeight; 
    } 
    if (t != element) 
    { 
      element.style.top = _top + "px"; 
      contentBox.style.top = -_top * (contentBox.offsetHeight / mainBox.offsetHeight) + "px"; 
      _wheelData = _top; 
    } 
   } 
  } 
} 
new addScroll('mainBox', 'content', 'scrollDiv'); 
$(function(){ 
  $("#scrollBox").hide(); 
  $("#mainBox").mouseover(function(){ 
    $("#scrollBox").show(); 
  }).mouseout(function(){ 
    $("#scrollBox").hide(); 
  }); 
}); 
</script>
</body>
</html>

代码描述:js滚动条效果。js实现的模拟滚动条效果



151 201



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到