js实现简易垂直滚动条

 更新时间:2017年02月22日 14:43:23   作者:wp0214  
本文主要介绍了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>

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

相关文章

  • JS中的算法与数据结构之队列(Queue)实例详解

    JS中的算法与数据结构之队列(Queue)实例详解

    这篇文章主要介绍了JS中的算法与数据结构之队列(Queue),结合实例形式详细分析了javascript中队列的概念、原理、定义及常见操作技巧,需要的朋友可以参考下
    2019-08-08
  • javascript中alert()与console.log()的区别

    javascript中alert()与console.log()的区别

    我们在做js调试的时候使用 alert 可以显示信息,调试程序,alert 弹出窗口会中断程序, 如果要在循环中显示信息,手点击关闭窗口都累死。而且 alert 显示对象永远显示为[object ]。 自己写的 log 虽然可以显示一些 object 信息,但很多功能支持都没有 console 好
    2015-08-08
  • 前端开发之CSS原理详解

    前端开发之CSS原理详解

    这篇文章主要介绍了前端开发之CSS原理详解的相关资料,需要的朋友可以参考下
    2017-03-03
  • JavaScript 计算图片加载数量的代码

    JavaScript 计算图片加载数量的代码

    先定义一个图片的数组,然后通过image的onload事件来计算,注意,onload在ie和火狐有所不同。
    2011-01-01
  • javascript修改IMG标签的src问题

    javascript修改IMG标签的src问题

    javascript修改IMG标签的SRC,在IE6下面图片修改正常,但在IE7和Firefox下面却不刷新,下面有个解决方法,大家可以参考下
    2014-03-03
  • 基于ionic实现下拉刷新功能

    基于ionic实现下拉刷新功能

    这篇文章主要为大家详细介绍了基于ionic实现下拉刷新功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • js获取数组的最后一个元素

    js获取数组的最后一个元素

    这篇文章主要介绍了javascript获取数组的最后一个元素,需要的朋友可以参考下
    2015-04-04
  • Array栈方法和队列方法的特点说明

    Array栈方法和队列方法的特点说明

    本篇文章主要是对Array栈方法与队列方法的特点进行了详细的说明介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • BootStrap Datepicker 插件修改为默认中文的实现方法

    BootStrap Datepicker 插件修改为默认中文的实现方法

    bootstrap-datepicker 是一个非常优秀的时间选择插件,默认是英文显示日期的,通过下面几个小修改让其支持默认中文。下面通过本文给大家介绍BootStrap Datepicker 插件修改为默认中文的实现方法,一起看看吧
    2017-02-02
  • Openlayers实现地图的基本操作

    Openlayers实现地图的基本操作

    这篇文章主要为大家详细介绍了Openlayers实现地图的基本操作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09

最新评论