原生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 相关文章推荐
有道JavaScript监听浏览器的问题
Jun 23 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
js实现拖拽与碰撞检测
Sep 18 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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验证码
2015/05/04 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
angularJS 入门基础
2015/02/09 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
编写Python CGI脚本的教程
2015/06/29 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
Python持续监听文件变化代码实例
2020/07/22 Python
中国梦的演讲稿
2014/01/08 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
大学新学期计划书
2014/04/28 职场文书
师德演讲稿范文
2014/05/06 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
教师群众路线心得体会
2014/11/04 职场文书
护士个人年终总结
2015/02/13 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
庆七一主持词
2015/06/29 职场文书
导游词之太原天龙山
2020/01/02 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android