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 相关文章推荐
js 判断脚本加载完毕的代码
Jul 13 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
js Date概念详细介绍
Nov 22 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
小程序api实现promise封装过程解析
Nov 21 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
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
php下安装配置fckeditor编辑器的方法
2011/03/02 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
PHP SPL使用方法和他的威力
2013/11/12 PHP
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
详解python-图像处理(映射变换)
2019/03/22 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
促销活动策划方案
2014/01/12 职场文书
旅游活动总结
2014/08/27 职场文书
员工表扬信怎么写
2015/05/05 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
Python实现老照片修复之上色小技巧
2021/10/16 Python
python 标准库原理与用法详解之os.path篇
2021/10/24 Python