全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:400-708-3566

JavaScript实现垂直滚动条效果

本文实例为大家分享了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> 

效果:

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


# js垂直滚动条  # js滚动条  # js滚动条效果  # JS简单判断滚动条的滚动方向实现方法  # 原生js封装自定义滚动条  # js实现彩色条纹滚动条效果  # 原生js仿浏览器滚动条效果  # js实现简易垂直滚动条  # 基于JavaScript实现自定义滚动条  # js实现刷新页面后回到记录时滚动条的位置【两种方案可选】  # js 简易版滚动条实例(适用于移动端H5开发)  # 滚动条  # 我想  # 一句  # 拖动  # 这回  # 向外  # 大家分享  # 具体内容  # 话都  # 大家多多  # 计算公式  # 滑块  # width  # box  # px  # padding  # style  # title  # margin  # height 


相关文章: 北京制作网站的公司,北京铁路集团官方网站?  较简单的网站制作软件有哪些,手机版网页制作用什么软件?  利用JavaScript实现拖拽改变元素大小  如何用腾讯建站主机快速创建免费网站?  天津个人网站制作公司,天津网约车驾驶员从业资格证官网?  网站建设制作需要多少钱费用,自己做一个网站要多少钱,模板一般多少钱?  成都网站制作报价公司,成都工业用气开户费用?  建站主机是什么?如何选择适合的建站主机?  建站之星安装需要哪些步骤及注意事项?  小米网站链接制作教程,请问miui新增网页链接调用服务有什么用啊?  5种Android数据存储方式汇总  建站之星安装后界面空白如何解决?  魔毅自助建站系统:模板定制与SEO优化一键生成指南  外贸公司网站制作哪家好,maersk船公司官网?  C#怎么创建控制台应用 C# Console App项目创建方法  厦门模型网站设计制作公司,厦门航空飞机模型掉色怎么办?  成都响应式网站开发,dw怎么把手机适应页面变成网页?  如何通过远程VPS快速搭建个人网站?  如何在腾讯云服务器上快速搭建个人网站?  如何选择服务器才能高效搭建专属网站?  如何在香港服务器上快速搭建免备案网站?  济南专业网站制作公司,济南信息工程学校怎么样?  建站之星如何保障用户数据免受黑客入侵?  广东企业建站网站优化与SEO营销核心策略指南  常州企业建站如何选择最佳模板?  西安制作网站公司有哪些,西安货运司机用的最多的app或者网站是什么?  ,南京靠谱的征婚网站?  如何通过FTP服务器快速搭建网站?  香港服务器选型指南:免备案配置与高效建站方案解析  可靠的网站设计制作软件,做网站设计需要什么样的电脑配置?  如何快速搭建自助建站会员专属系统?  宝塔建站无法访问?如何排查配置与端口问题?  如何在云虚拟主机上快速搭建个人网站?  学校免费自助建站系统:智能生成+拖拽设计+多端适配  武清网站制作公司,天津武清个人营业执照注销查询系统网站?  如何通过VPS建站无需域名直接访问?  如何在IIS管理器中快速创建并配置网站?  如何在阿里云高效完成企业建站全流程?  网站网页制作电话怎么打,怎样安装和使用钉钉软件免费打电话?  网站图片在线制作软件,怎么在图片上做链接?  制作网站怎么制作,*游戏网站怎么搭建?  c++怎么使用类型萃取type_traits_c++ 模板元编程类型判断【方法】  建站之星×万网:智能建站系统+自助建站平台一键生成  红河网站制作公司,红河事业单位身份证如何上传?  网站制作模板下载什么软件,ppt模板免费下载网站?  ,想在网上投简历,哪几个网站比较好?  如何解决ASP生成WAP建站中文乱码问题?  如何用美橙互联一键搭建多站合一网站?  相册网站制作软件,图片上的网址怎么复制?  建站主机数据库如何配置才能提升网站性能? 

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。