欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JS模拟简易滚动条效果代码(附demo源码)_javascript技巧

程序员文章站 2022-04-10 19:44:56
...
本文实例讲述了JS模拟简易滚动条效果的方法。分享给大家供大家参考,具体如下:

使用Js模拟滚动条。简易模式,类似手机上常见的滚动条。

效果如下:

JS模拟简易滚动条效果代码(附demo源码)_javascript技巧

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 = (div.scrollHeight - div.clientHeight)) return true;
    div.scrollTop += step;
  } else {
    if(div.scrollTop == 0) return true;
    div.scrollTop -= step;
  }
  setScrollPosition(div);
  return false;
}

完整实例代码点击此处本站下载

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。