原生js仿浏览器滚动条效果


Posted in Javascript onMarch 02, 2017

效果图:

原生js仿浏览器滚动条效果

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>仿浏览器滚动条</title>
 <style type="text/css">
 *{margin: 0;padding: 0;}
 #demo{width: 300px;height: 500px;border: 1px solid red;margin:100px;position:relative;overflow:hidden;}
 p{padding:5px 20px 5px 5px;font-size:26px;position:relative;}
 #scrll{width:18px;border-radius:18px;position:absolute;top:0;right:0;background:red;cursor:pointer;}
 </style>
</head>
<body>
<div id="demo">
 <p id="dp">我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容</p>
 <div id="scrll"></div>
</div>
</body>
<script type="text/javascript">
 (function(window){
 function $(id){
  return document.getElementById(id);
 };
 // 获取对象
 var dp = $("dp"),demo = $("demo"),scrll = $("scrll");
 // 获取dp的长度
 var dpHeight = dp.offsetHeight;
 // 获取demo的长度
 var demoHeight = demo.offsetHeight;
 // 根据比值计算scrll的长度
 var scrllHeight = demoHeight * demoHeight / dpHeight ;
 // 如果内容长度小于窗口长度,则滚动条不显示
 if( dp.offsetHeight < demo.offsetHeight){
  scrllHeight = 0;
 };
 scrll.style.height = scrllHeight + "px";
 // 获取滚动条和内容移动距离的比例
 var bilu = ( dp.offsetHeight - demo.offsetHeight ) / (demo.offsetHeight - scrll.offsetHeight);
 // 滚动条滚动事件
 scrll.onmousedown = function(event){
  // event兼容性解决
  // console.log(demo.offsetTop)
  var event = event || window.event;
  // 获取鼠标按下的页面坐标
  // 滚动条滚动时只有top值改变,所有不需要获取pageX
  var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
  // 获取鼠标在scrll内的坐标
  var scrllY = pageY - demo.offsetTop - scrll.offsetTop;
  // 给document绑定鼠标移动事件
  document.onmousemove = function(event){
  var event = event || window.event;
  // 获取鼠标移动时的坐标
  var moveY = event.pageY || event.clientY + document.documentElement.scrollTop;
  // 获取滚动条的移动坐标
  var trueY = moveY - scrllY - demo.offsetTop ;
  // 限制滚动条移动的范围
  if( trueY < 0 ){
   trueY = 0 ;
  };
  if( trueY > demo.offsetHeight - scrll.offsetHeight ){
   trueY = demo.offsetHeight - scrll.offsetHeight;
  };
  scrll.style.top = trueY + "px";
  //清除选中文字
       window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
       // 获取文字区域移动的距离
       var dpY = trueY * bilu ;
       dp.style.top = - dpY + "px";
  }
 };
 // 鼠标抬起清除鼠标移动事件
 document.onmouseup = function(){
  document.onmousemove = null;
 }
 })(window)
</script>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
js清理Word格式示例代码
Feb 13 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
JSONP原理及简单实现
Jun 08 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
JavaScript如何判断input数据类型
Feb 06 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 #Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 #Javascript
浅谈Vue.js
Mar 02 #Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 #Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 #Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 #Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 #Javascript
You might like
php_xmlhttp 乱码问题解决方法
2009/08/07 PHP
PHP程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
PHP判断远程图片是否存在的几种方法
2014/05/04 PHP
php读取3389的脚本
2014/05/06 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
简明json介绍
2008/09/28 Javascript
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
python pyheatmap包绘制热力图
2018/11/09 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
python中np是做什么的
2020/07/21 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
服装机修工岗位职责
2013/12/26 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
师德师风个人整改措施
2014/10/27 职场文书
教师远程研修感悟
2015/11/18 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书