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 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
javascript CSS画图之基础篇
Jul 29 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
从零开始学习搭建React脚手架项目
Aug 23 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
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中$_REQUEST、$_POST、$_GET的区别和联系小结
2011/11/23 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
python清除指定目录内所有文件中script的方法
2015/06/30 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
python读取Excel实例详解
2018/08/17 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
Python生成器常见问题及解决方案
2020/03/21 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
美国在线家装零售商:Build.com
2016/09/02 全球购物
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
大学生求职信范文应怎么写
2014/01/01 职场文书
咖啡书吧创业计划书
2014/01/13 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
网络宣传方案
2014/03/15 职场文书
爱祖国演讲稿
2014/05/04 职场文书
初中新生军训方案
2014/05/13 职场文书
房展策划方案
2014/06/07 职场文书
建国大业观后感
2015/06/01 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
在Django中使用MQTT的方法
2021/05/10 Python
python数据处理之Pandas类型转换
2022/04/28 Python