javascript 自定义滚动条

2013 - 3 - 20 作者 : Jimco 分类 : JavaScript

      前两天在博客园看到个模拟滚动条的实现,测试了下在各个浏览器下的效果都不是很好,也懒得去细看他的代码实现了。想起去年太监掉的一篇关于滚动条的文章,重新整理下。虽然没有华丽丽的效果,但至少不会出现重大bug: 

var oParent = document.getElementById('slider')
  , oBox = document.getElementById('bar')
  , oWp = document.getElementById('wrap')
  , oDiv = document.getElementById('content')
  , bDown = true;

oBox.onmousedown = function(ev){
  var oEv = ev || event;
  var disY = oEv.clientY - oBox.offsetTop;
  
  document.onmousemove = function(ev){
    var oEv = ev || event;
    var l = oEv.clientY - disY;

    // setLeft(l);
    setTop(l);
  }

  document.onmouseup = function(){
    document.onmousemove = null;
    document.onmouseup = null;
  }

  return false;
}

function mouseWheel(ev){
  var oEv = ev || event;
  bDown = oEv.wheelDelta ? oEv.wheelDelta < 0 : oEv.detail > 0;

  if(bDown){
    // setLeft(oBox.offsetLeft + 10);
    setTop(oBox.offsetTop + 10);
  }else{
    // setLeft(oBox.offsetLeft - 10);
    setTop(oBox.offsetTop - 10);
  }
  
  if(oEv.preventDefault){
    oEv.preventDefault();
  }
  return false;
}

function setLeft(l){
  if(l < 0){
    l = 0;
  }else if(l > oParent.offsetWidth - oBox.offsetWidth){
    l = oParent.offsetWidth - oBox.offsetWidth;
  }

  oBox.style.left = l + 'px';
  var bl = l/(oParent.offsetWidth - oBox.offsetWidth);
  oDiv.style.top =- (oDiv.offsetHeight - oWp.offsetHeight)*bl + 'px';
}

function setTop(l){
  if(l < 0){
    l = 0;
  }else if(l > oParent.offsetHeight - oBox.offsetHeight){
    l = oParent.offsetHeight - oBox.offsetHeight;
  }

  oBox.style.top = l + 'px';
  var bl = l/(oParent.offsetHeight - oBox.offsetHeight);
  oDiv.style.top =- (oDiv.offsetHeight - oWp.offsetHeight)*bl + 'px';
}

function setBarHeight(h){
  var barHeight = h <= 1000 ? 100 : 100 - Math.floor((h - 1000)/50);
  oBox.style.height = barHeight < 30 ? '30px' : barHeight + 'px';
}

function addEvent(obj, sEv, fn){
  if(obj.attachEvent){
    obj.attachEvent('on' + sEv,fn);
  }else{
    obj.addEventListener(sEv,fn,false);
  }
}

setBarHeight(oDiv.offsetHeight);
addEvent(oParent, 'mousewheel', mouseWheel);
addEvent(oParent, 'DOMMouseScroll', mouseWheel);
addEvent(oWp, 'mousewheel', mouseWheel);
addEvent(oWp, 'DOMMouseScroll', mouseWheel); 

      当然,实际业务比单纯的效果实现要来得复杂,数据的加载、滑块响应渲染...... 单从效果上来说也有很多有待优化的地方,点击滚动条区域的快速跳转,键盘事件的绑定......

      按我一贯的风格,这边不做代码分析,我觉得如果你碰到一个没有接触过,或者还不熟悉的知识点,上 Google 或者 Stackoverflow 比单纯的有个人告诉你就是这样更能引发思考。

      好了,距离上次发文章又有不短的时间了,今天就这样吧。当然,最后不能少了 Demo

14279 人围观 / 5 条评论 ↓快速评论↓

  • 这个不难 大一的时候我就回了。阿狸1阿狸1阿狸1

    一站到底 2013-03-29 22:35 回复

    • @一站到底:一直都很不喜欢有人简单的评价难或不难,难道就因为你大一的时候写过就是不难?或者你的需求就是文章中的那几行代码?当然,按照这种逻辑走下去,简直都能无视各种技术了!

      Jimco 2013-03-29 22:57 回复

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18

Powered by Jimco

©2013 前端那些事儿 Designed by Jimco

About me|意见反馈