js实现简易垂直滚动条


Posted in Javascript onFebruary 22, 2017

效果图:

js实现简易垂直滚动条

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>垂直滚动条</title>
 <style type="text/css">
  .con {
  width: 350px;
  height: 600px;
  border: 1px solid saddlebrown;
  position: relative;
  overflow: hidden;
  }
  .txtBox{
  position: absolute;
  padding-left: 8px;
  padding-right: 36px;
  left: 0px;
  top: 0;
  }
  .bar {
  width: 26px;
  height: 100%;
  background: gainsboro;
  position: absolute;
  top: 0;
  right: 0;
  }
  .drdap {
  width: 100%;
  height: 100px;
  background: steelblue;
  border-radius: 10px;
  position: absolute;
  cursor: pointer;
  left: 0;
  top: 0;
  }
 </style>
 </head>
 <body>
 <div class="con">
  <div class="txtBox">
  人的一生至少有两次冲动,一次说走就走的旅行和一次奋不顾身的爱情。如果你有些厌倦现在的生活状态,一场冒险式的旅行便是你的解药。免费落地签已开放,来#迪拜#穿越沙漠海洋,感受异国的多元文化,也许还能收获一份真挚的爱情,结束你的单身岁月,将一个又一个精彩纷呈的旅行故事镌刻在自己生命里。你是否也有这样的冒险经历?人的一生至少有两次冲动,一次说走就走的旅行和一次奋不顾身的爱情。如果你有些厌倦现在的生活状态,一场冒险式的旅行便是你的解药。免费落地签已开放,来#迪拜#穿越沙漠海洋,感受异国的多元文化,也许还能收获一份真挚的爱情,结束你的单身岁月,将一个又一个精彩纷呈的旅行故事镌刻在自己生命里。你是否也有这样的冒险经历?<br />人的一生至少有两次冲动,一次说走就走的旅行和一次奋不顾身的爱情。如果你有些厌倦现在的生活状态,一场冒险式的旅行便是你的解药。免费落地签已开放,来#迪拜#穿越沙漠海洋,感受异国的多元文化,也许还能收获一份真挚的爱情,结束你的单身岁月,将一个又一个精彩纷呈的旅行故事镌刻在自己生命里。你是否也有这样的冒险经历?<br />人的一生至少有两次冲动,一次说走就走的旅行和一次奋不顾身的爱情。如果你有些厌倦现在的生活状态,一场冒险式的旅行便是你的解药。免费落地签已开放,来#迪拜#穿越沙漠海洋,感受异国的多元文化,也许还能收获一份真挚的爱情,结束你的单身岁月,将一个又一个精彩纷呈的旅行故事镌刻在自己生命里。你是否也有这样的冒险经历?<br />人的一生至少有两次冲动,一次说走就走的旅行和一次奋不顾身的爱情。如果你有些厌倦现在的生活状态,一场冒险式的旅行便是你的解药。免费落地签已开放,来#迪拜#穿越沙漠海洋,感受异国的多元文化,也许还能收获一份真挚的爱情,结束你的单身岁月,将一个又一个精彩纷呈的旅行故事镌刻在自己生命里。你是否也有这样的冒险经历?人的一生至少有两次冲动,一次说走就走的旅行和一次奋不顾身的爱情。如果你有些厌倦现在的生活状态,一场冒险式的旅行便是你的解药。免费落地签已开放,来#迪拜#穿越沙漠海洋,感受异国的多元文化,也许还能收获一份真挚的爱情,结束你的单身岁月,将一个又一个精彩纷呈的旅行故事镌刻在自己生命里。你是否也有这样的冒险经历?<br />人的一生至少有两次冲动,一次说走就走的旅行和一次奋不顾身的爱情。如果你有些厌倦现在的生活状态,一场冒险式的旅行便是你的解药。免费落地签已开放,来#迪拜#穿越沙漠海洋,感受异国的多元文化,也许还能收获一份真挚的爱情,结束你的单身岁月,将一个又一个精彩纷呈的旅行故事镌刻在自己生命里。你是否也有这样的冒险经历?人的一生至少有两次冲动,一次说走就走的旅行和一次奋不顾身的爱情。如果你有些厌倦现在的生活状态,一场冒险式的旅行便是你的解药。免费落地签已开放,来#迪拜#穿越沙漠海洋,感受异国的多元文化,也许还能收获一份真挚的爱情,结束你的单身岁月,将一个又一个精彩纷呈的旅行故事镌刻在自己生命里。你是否也有这样的冒险经历?
  </div>
  <div class="bar">
  <div class="drdap"></div>
  </div>
 </div>
 </body>
 <script type="text/javascript">
 var con = document.querySelector('.con');
 var txtBox = document.querySelector('.txtBox');
 var bar = document.querySelector('.bar');
 var drdap = document.querySelector('.drdap');
 //滚动条的高度 = 内容高度/内容盒子高度*内容高度
 drdap.style.height = con.offsetHeight/txtBox.offsetHeight*con.offsetHeight + 'px';
 drdap.onmousedown = function(ev){
  var disy = ev.clientY - drdap.offsetTop;
  document.onmousemove = function(ev){
  var currtY= ev.clientY - disy;
  if (currtY<0) { currtY = 0;}
  if (currtY>bar.offsetHeight-drdap.offsetHeight) {currtY = bar.offsetHeight-drdap.offsetHeight;}
  drdap.style.top = currtY + 'px';
  var scalY = currtY/(bar.offsetHeight-drdap.offsetHeight);
  console.log(txtBox.offsetHeight * scalY)
  txtBox.style.top = scalY * (con.offsetHeight - txtBox.offsetHeight ) + 'px'
  }
  document.onmouseup = function(ev){
  document.onmousemove = null;
  }
  return false;
 }
 </script>
</html>

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

Javascript 相关文章推荐
浏览器常用高宽的jquery插件
Feb 24 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
javascript轮播图算法
Oct 21 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
详解vue express启动数据服务
Jul 05 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
微信小程序实现吸顶特效
Jan 08 Javascript
微信小程序 引用其他js文件实现代码
Feb 22 #Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 #Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 #Javascript
JS实现一个简单的日历
Feb 22 #Javascript
js实现日历与定时器
Feb 22 #Javascript
JS验证字符串功能
Feb 22 #Javascript
Bootstrap3 模态框使用实例
Feb 22 #Javascript
You might like
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
javascript实现动态加载CSS
2015/01/26 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
python求众数问题实例
2014/09/26 Python
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
python万年历实现代码 含运行结果
2017/05/20 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
小学教师事迹材料
2014/01/13 职场文书
幼儿园大班毕业感言
2014/02/06 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
施工安全生产承诺书
2014/05/23 职场文书
淘宝客服工作职责
2014/07/11 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
伊索寓言读书笔记
2015/06/30 职场文书