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 相关文章推荐
[JS源码]超长文章自动分页(客户端版)
Jan 09 Javascript
给Function做的OOP扩展
May 07 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
javascript不可用的问题探究
Oct 01 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
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
phpwind中的数据库操作类
2007/01/02 PHP
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
js用图作提交按钮或超连接
2008/03/26 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
有原因的手表:Flex Watches
2019/03/23 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
逻辑链路控制协议
2016/10/01 面试题
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
标准化管理实施方案
2014/02/25 职场文书
初中班主任评语
2014/04/24 职场文书
团支部推优材料
2014/05/21 职场文书
水利水电专业自荐信
2014/07/08 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
务虚会发言材料
2014/12/25 职场文书
个人廉政承诺书
2015/04/28 职场文书
企业文化学习心得体会
2016/01/21 职场文书
课改心得体会范文
2016/01/25 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸