JavaScript实现垂直滚动条效果


Posted in Javascript onJanuary 18, 2017

本文实例为大家分享了js垂直滚动条的实现代码,供大家参考,具体内容如下

1、红色盒子高度计算公式:

容器的高度 / 内容的高度 * 容器的高度

2、红色方块移动一像素 ,我们的内容盒子移动多少呢?

(内容盒子高度 - 大盒子高度) / (大盒子高度 - 红色盒子的高度) 计算倍数

(内容盒子高度 -  大盒子高度)/  (大盒子高度 - 红色盒子的高度)   * 红色盒子移动的数值

<html>
<head>
  <meta charset="UTF-8">
  <title>垂直滚动条</title>
  <style>
  *{
    padding: 0;
    margin: 0;
  }
    .box{
      width: 300px;
      height: 500px;
      border: 1px solid red;
      padding-right: 20px;
      margin: 100px;
      position: relative;
    }
    .content{
       padding: 5px 18px 10px 5px;
      position: absolute;
      left: 0;
      top: -10px;
    }
    .scroll{
      position: absolute;
      top: 0;
      right: 0;
      background-color: #ccc;
      width: 20px;
      height: 100%;
    }
    .bar{
      width: 100%;
      height: 20px;
      background-color: red;
      border-radius: 10px;
      position: absolute;
      left: 0;
      top: 0;
      cursor: pointer;
    }
  </style>  
</head>
<body>
  <div class="box" id="box">
    <div class="content">
      三观不同,一句话都嫌多。我想,人和人之间一定存在磁场这回事,沿着三观向外辐射。
   …………
 </div>
    <div class="scroll">
      <div class="bar"></div>
    </div>
  </div>
  <script>  
    var box = document.getElementById('box');
    var content = box.children[0];
    var scroll = box.children[1];
    var bar = scroll.children[0];
    //计算滚动条红色bar的长度:容器长度/内容长度 * 容器长度,,比例关系
    bar.style.height = box.offsetHeight / content.offsetHeight * box.offsetHeight +"px";
    bar.onmousedown = function(event){
      var event = event || window.event;
      var y = event.clientY - this.offsetTop;
      document.onmousemove = function(event){
        var event = event || window.event;

        var top = event.clientY - y;
        if(top < 0)
          top =0;
        else if(top > scroll.offsetHeight - bar.offsetHeight)
          top = scroll.offsetHeight - bar.offsetHeight;
        bar.style.top = top +"px";
        //(内容盒子高度 - 大盒子高度) / (大盒子高度 - 红色盒子的高度)  * 红色盒子移动的数值
        content.style.top = -(content.offsetHeight - box.offsetHeight)/(box.offsetHeight - bar.offsetHeight)*top+"px";

        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();  // 防止拖动滑块的时候, 选中文字
      }
    }
    document.onmouseup = function(){
      document.onmousemove = null;
    }
  </script>
</body>
</html>

效果:

JavaScript实现垂直滚动条效果

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

Javascript 相关文章推荐
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
垃圾回收器的相关知识点总结
May 13 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 #Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 #Javascript
基于JavaScript实现窗口拖动效果
Jan 18 #Javascript
原生js实现节日时间倒计时功能
Jan 18 #Javascript
原生js实现返回顶部缓冲效果
Jan 18 #Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 #Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 #Javascript
You might like
在smarty中调用php内置函数的方法
2013/02/07 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
python实现将文本转换成语音的方法
2015/05/28 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
10条PHP编程习惯
2014/05/26 面试题
HashMap和Hashtable的区别
2013/05/18 面试题
正隆泰信息技术有限公司上机题
2012/06/14 面试题
入党自我评价范文
2014/02/02 职场文书
小学少先队活动方案
2014/02/18 职场文书
Python竟然能剪辑视频
2021/05/25 Python
MySQL 数据库范式化设计理论
2022/04/22 MySQL
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers