JS自定义滚动条效果简单实现代码


Posted in Javascript onOctober 27, 2020

本文实例为大家分享了JS自定义滚动条效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义滚动条</title>
<style type="text/css">
#div1 {
 width: 20px;
 height: 400px;
 position: relative;
 background: black;
 margin: 5px auto;
 left: 200px;
}
 
#div2 {
 width: 20px;
 height: 20px;
 position: absolute;
 background: green;
}
 
#div3 {
 width: 300px;
 height: 300px;
 position: relative;
 overflow: hidden;
 top: -320px;
 border: 1px solid black;
 background-color:green;
}
 
#div4 {
 position: absolute;
 left: 0;
 top: -20px;
 padding: 4px;
}
</style>
<script type="text/javascript">
 window.onload = function() {
 var oDiv = document.getElementById('div1');
 var oDiv2 = document.getElementById('div2');
 var oDiv3 = document.getElementById('div3');
 var oDiv4 = document.getElementById('div4');
 var disY = 0;
 oDiv.onmousedown = function(ev) {
  var oEvent = ev || event;
  //Div距离 ClientX-Left
  disY = oEvent.clientY - oDiv2.offsetTop;
  if (oDiv2.setCapture) {
  //IE
  oDiv2.onmousemove = function(ev) {
   var oEvent = ev || event;
   var y = oEvent.clientY - disY;
   //下拉
   var scale = y / (oDiv.offsetHeight - oDiv2.offsetHeight);
   // document.title =scale;
   //磁铁吸附
   if (scale < 0) {
   scale = 0;
   } else if (scale > 1) {
   scale = 1;
   }
   if (y < 0) {
   y = 0;
   } else if (y > oDiv.offsetHeight - oDiv2.offsetHeight) {
   y = oDiv.offsetHeight - oDiv2.offsetHeight;
   }
   oDiv2.style.top = y + 'px';
   oDiv4.style.top = -(oDiv4.offsetHeight - oDiv3.offsetHeight)
    * scale + 'px';
 
  };
  oDiv2.onmouseup = function() {
   oDiv2.onmousemove = null;
   oDiv2.onmouseup = null;
 
   oDiv2.releaseCapture();
  };
 
  oDiv2.setCapture();
  } else {
  //Chrome FF
  oDiv2.onmousemove = function(ev) {
   var oEvent = ev || event;
   var y = oEvent.clientY - disY;
   if (y < 0) {
   y = 0;
   } else if (y > Div2.offsetHeight - oDiv.offsetHeight) {
   y = Div2.offsetHeight - oDiv.offsetHeight;
   }
   oDiv2.style.top = y + 'px';
  };
  document.onmouseup = function() {
   document.onmousemove = null;
   document.onmouseup = null;
 
  };
 
  }
  //阻止浏览器的默认拖拽
  return false;
 };
 
 };
</script>
</head>
<body>
 <div id="div1" title="我是素材">
 <div id="div2" title="我是下拉线"></div>
 </div>
 <div id="div3" title="我是下拉框">
 <div id="div4">来自意大利时尚之都米兰的地标建筑“垂直森林”来到了中国。据美媒boredpanda2月6日报道,“垂直森林之父”为斯特凡诺·博埃里(Stefano
  Boeri),而南京“垂直森林”项目为亚洲首座博埃里设计在建的“垂直森林”建筑。
 
  报道称,此项建筑将由656英尺(约200米)及354英尺(约108米)的双塔楼组成,外围覆盖至少1000棵树以及约2500棵灌木类植物。“垂直森林”每天可以消化二氧化碳,并释放132磅(约60千克)的氧气。来自意大利时尚之都米兰的地标建筑“垂直森林”来到了中国。据美媒boredpanda2月6日报道,“垂直森林之父”为斯特凡诺·博埃里(Stefano
  Boeri),而南京“垂直森林”项目为亚洲首座博埃里设计在建的“垂直森林”建筑。
 
  报道称,此项建筑将由656英尺(约200米)及354英尺(约108米)的双塔楼组成,外围覆盖至少1000棵树以及约2500棵灌木类植物。“垂直森林”每天可以消化二氧化碳,并释放132磅(约60千克)的氧气。来自意大利时尚之都米兰的地标建筑“垂直森林”来到了中国。据美媒boredpanda2月6日报道,“垂直森林之父”为斯特凡诺·博埃里(Stefano
  Boeri),而南京“垂直森林”项目为亚洲首座博埃里设计在建的“垂直森林”建筑。
 
  报道称,此项建筑将由656英尺(约200米)及354英尺(约108米)的双塔楼组成,外围覆盖至少1000棵树以及约2500棵灌木类植物。“垂直森林”每天可以消化二氧化碳,并释放132磅(约60千克)的氧气。来自意大利时尚之都米兰的地标建筑“垂直森林”来到了中国。据美媒boredpanda2月6日报道,“垂直森林之父”为斯特凡诺·博埃里(Stefano
  Boeri),而南京“垂直森林”项目为亚洲首座博埃里设计在建的“垂直森林”建筑。
 
  报道称,此项建筑将由656英尺(约200米)及354英尺(约108米)的双塔楼组成,外围覆盖至少1000棵树以及约2500棵灌木类植物。“垂直森林”每天可以消化二氧化碳,并释放132磅(约60千克)的氧气。
 </div>
 </div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JAVASCRIPT 对象的创建与使用
Mar 09 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
JS字符串函数扩展代码
Sep 13 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
js弹出的对话窗口永远保持居中显示
Dec 15 Javascript
alert和confirm功能介绍
May 21 Javascript
JS简单计算器实例
Jan 20 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
vue购物车插件编写代码
Nov 27 Javascript
WebPack工具运行原理及入门教程
Dec 02 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 #jQuery
微信小程序分页加载的实例代码
Jul 11 #Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 #Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 #Javascript
underscore之function_动力节点Java学院整理
Jul 11 #Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 #Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 #Javascript
You might like
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
JavaScript访问样式表代码
2010/10/15 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
JS设计模式之责任链模式实例详解
2018/02/03 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
Python调用飞书发送消息的示例
2020/11/10 Python
python 自动识别并连接串口的实现
2021/01/19 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
PHP面试题附答案
2015/11/28 面试题
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
银行实习生自我鉴定范文
2013/09/19 职场文书
党校培训自我鉴定
2014/02/01 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
讲座主持词
2014/03/20 职场文书
委托书的格式
2014/08/01 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang