js實現的模擬滾動條效果

antzone發表於2017-03-15

自帶的滾動調效果美觀度實在差強人意，在一般美觀度要求不高的網站還算是可以，但是如果美觀度要求很高的話，那麼就有點力不從心了，因為只有IE瀏覽器支援對滾動條的一些美化效果，如果想在谷歌或者火狐這樣的瀏覽器也實現比較美觀的效果，那麼就需要模擬實現滾動條效果，下面是一段來自網路的程式碼例項和大家分享一下，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</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>

javascript模擬實現滾動條效果程式碼例項
2017-04-13
JavaScript
Delphi中TFlowPanel實現滾動條效果
2013-12-13
js模擬實現列舉效果
2017-03-21
JS
實現隨著滾動條滾動，導航會自動切換的效果
2018-02-28
拖動滾動條實現側欄導航定位效果
2017-10-31
拖動滾動條實現內容自動載入效果
2017-04-03
JS模擬滾動條(有demo和原始碼下載,支援拖動滾輪點選事件)
2013-12-06
JS原始碼事件
隱藏滾動條保留滾動效果
2018-04-19
Vue.js+cube-ui（Scroll元件）實現類似頭條效果的橫向滾動導航條
2019-06-23
Vue.jsUI元件
mousewheel 模擬滾動
2016-06-28
模擬帶有滾動條的select下拉選單
2017-11-22
按鈕滾動條效果
2016-05-19
js模擬實現多型效果程式碼例項
2017-03-27
JS多型
js滑鼠移動實現圖片立體滾動效果
2017-04-07
JS
拖動滾動條實現div跟隨效果程式碼例項
2017-10-18
前端實現文字滾動效果
2021-09-09
前端
js如何實現將滾動條處於最下端
2017-03-17
JS
移動端模擬滾動
2018-09-10
js和css3實現360旋轉滾動效果
2017-04-14
JSCSSS3
js、jQuery實現文字上下無縫輪播、滾動效果
2018-06-29
JSjQuery
css實現視差滾動效果
2017-12-14
CSS
js實現的單行文字不間斷無縫滾動效果
2017-04-17
JS
css實現隱藏滾動條
2017-01-04
CSS
使用UICollectionView實現首頁的滾動效果
2016-07-22
UIView
影像平滑滾動效果的VC實現 (轉)
2007-12-06
使用 React + Rxjs 實現一個虛擬滾動元件
2019-01-10
ReactJS元件
jquery模擬實現的連結title提示效果
2017-03-03
jQuery
模擬實現的星星評分效果詳解
2017-04-06
巢狀滾動效果實現討論
2019-03-06
巢狀
js實現 web頁面的滾動條下拉時載入更多
2018-08-29
JSWeb
jQuery實現的設定滾動條的位置
2017-03-09
jQuery
使用js控制滾動條的位置
2018-08-06
JS
css實現隱藏滾動條並可以滾動內容
2020-11-03
CSS
css3實現的立體滾動效果
2017-03-13
CSSS3
FullPage.js – 輕鬆實現全屏滾動（單頁網站）效果
2013-10-12
JS網站
JavaScript中模擬實現jsonp
2021-01-27
JavaScriptJSON
css3實現的滾動的檯球效果
2017-03-11
CSSS3
美化滾動條效果程式碼例項
2018-07-11

js實現的模擬滾動條效果

相關文章