這篇文章主要介紹了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);

  }

  //當內容未超出現(xiàn)在高度時，不添加滾動條  

  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;

  }

}

//當頁面大小發(fā)生變化時，重新計算滾動條位置

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程序設計有所幫助。