原生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 相关文章推荐
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
js特殊字符过滤的示例代码
Mar 05 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
js实现文字滚动效果
Mar 03 Javascript
Javascript的无new构建实例详解
May 15 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 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 模板高级篇总结
2006/12/21 PHP
php异常处理使用示例
2014/02/25 PHP
php操作redis缓存方法分享
2015/06/03 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
vue.js表格分页示例
2016/10/18 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
Python实现学生成绩管理系统
2020/04/05 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
Django的Modelforms用法简介
2019/07/27 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
岗位聘任书范文
2014/03/29 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
学生检讨书范文
2014/10/30 职场文书
产品质量保证书范本
2015/02/27 职场文书
回复函范文
2015/07/14 职场文书