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


Posted in Javascript onApril 05, 2016

本文实例讲述了JS模拟简易滚动条效果的方法。分享给大家供大家参考,具体如下:

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

效果如下:

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

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 <= 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;
  }
}
//当页面大小发生变化时,重新计算滚动条位置
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程序设计有所帮助。

Javascript 相关文章推荐
jQuery Autocomplete自动完成插件
Jul 17 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
深入详解JS函数的柯里化
Jun 09 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 #Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 #Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 #Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 #Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 #Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 #Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 #Javascript
You might like
Window下PHP三种运行方式图文详解
2013/06/11 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
js展开闭合效果演示代码
2013/07/24 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
python中range()与xrange()用法分析
2016/09/21 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
How TDD works
2012/09/30 面试题
《窗前的气球》教学反思
2014/04/07 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
伦敦奥运会口号
2014/06/13 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers