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 相关文章推荐
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
JavaScript实现select添加option
Jul 03 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
JS获取一个未知DIV高度的方法
Aug 09 Javascript
深入理解(function(){... })();
Aug 16 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 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
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
JS与C#编码解码
2013/12/03 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
python3序列化与反序列化用法实例
2015/05/26 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
新闻学毕业生自荐信
2013/11/15 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
酒会邀请函
2015/01/31 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python