使用js实现一个简单的滚动条过程解析


Posted in Javascript onSeptember 10, 2019

当我们给元素加上 overflow: auto; 的时候,就会出现滚动条,然而浏览的不同,滚动条的样式大不一样,有些甚至非常丑。

于是就想着自己写一个滚动条,大概需要弄清楚一下这几个点:

1、滚动条 bar 是根据内容的多少,高度不一样的,这个需要动态的计算

2、滚动条 bar 的 top 位置 和 内容scrollTop 的关系。

思路:

使用嵌套的布局,如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      *{
        padding: 0;
        margin: 0;
      }
      .wrap{
        width: 400px;
        height: 400px;
        border: 2px solid deeppink;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
      }
      .box-middle{
        height: 100%;
        overflow: auto;
        width: 200%;
      }
      .box{
        width: 50%;
      }
      .bar{
        background: #000;
        width: 10px;
        position: absolute;
        top: 0;
        right: 0;
      }
      .s1{
        height: 400px;
        background: pink;
      }
      .s2{
        height: 400px;
        background: deeppink;
      }
      .s3{
        height: 400px;
        background: deepskyblue;
      }
    </style>
  </head>
  <body>
    <div class="wrap" id="wrap">
      <div class="box-middle" id="boxMidle">
        <div class="box" id="content">
          <div class="s1">内容1</div>
          <div class="s2">内容2</div>
          <div class="s3">内容3</div>
        </div>
      </div>
      <div class="bar" id="bar"></div>
    </div>
     
  </body>
</html>

wrap 为最外层,给overflow:hidden;。

box-middle 是中间层,也是有滚动条的一层,可以宽度给多一点,这样就看不见滚动条了。

box就是内容层,通过js,计算使得 box 的宽度和wrap 保持一致,这样就完全看不见滚动条了

bar 为滚动条

写js之前,首先要弄懂一下三个属性:

offsetHeight : height + padding + border
clientHeight : height + padding
scrollHeight : 内容的高度(所有子元素高度和) + padding

1、计算比例:

bar的高度 / wrap的高度 = wrap的高度 / wrap 内容部子元素的高度和 ; 此时忽略 wrap 的padding:0

bar的top / wrap的scrollTop = wrap的高度 / wrap 内容部子元素的高度和 ;

需要注意,当比例 的 值 小于 1 的时候,说明 这个时候没有出现滚动条。

知道算法之后,写代码就简单很多,普通版代码如下:

var $wrap = document.getElementById("wrap");
var $boxMidle = document.getElementById("boxMidle");
var $content = document.getElementById("content");
var $bar = document.getElementById("bar");
$content.style.width = $wrap.clientWidth + "px"; //内容的宽度
var rate = $boxMidle.clientHeight/ $boxMidle.scrollHeight; //滚动条高度的比例,也是滚动条top位置的比例
 var barHeight = rate * $boxMidle.clientHeight; //滚动条的 bar 的高度
if(rate < 1){
  //需要出现滚动条,并计算滚动条的高度
  $bar.style.height = barHeight + "px";
}else{
  //不需要出现滚动条
  $bar.style.display = "none";
}
$boxMidle.onscroll = function(e){
  console.log("offsetHeight"+this.offsetHeight); //height + padding + border
  console.log("clientHeight"+this.clientHeight); // height + padding
  console.log("scrollHeight"+this.scrollHeight); //内容的高度(所有子元素高度和) + padding
  console.log(this.scrollTop);
  $bar.style.top = this.scrollTop*rate + "px";
}

使用面向对象版:

function ScrollBar(opt){
  var me = this;
  me.$wrap = document.getElementById(opt.wrap);
  me.$boxMidle = document.getElementById(opt.boxMidle);
  me.$content = document.getElementById(opt.content);
  me.$bar = document.getElementById(opt.bar);
  me.init();
  me.$boxMidle.onscroll = function(e){
    //console.log("offsetHeight"+this.offsetHeight); //content + padding + border
    //console.log("clientHeight"+this.clientHeight); // content + padding
    //console.log("scrollHeight"+this.scrollHeight); //内容的高度 + padding
    console.log(this.scrollTop);
    me.scrollToY(this.scrollTop * me.rate)
  }
}
ScrollBar.prototype.init = function(){
  this.$content.style.width = this.$wrap.clientWidth + "px"; //内容的宽度
  this.rate = this.$boxMidle.clientHeight/this.$boxMidle.scrollHeight; //滚动条高度的比例,也是滚动条top位置的比例
   this.barHeight = this.rate * this.$boxMidle.clientHeight; //滚动条的 bar 的高度
  if(this.rate < 1){
    //需要出现滚动条,并计算滚动条的高度
    this.$bar.style.height = this.barHeight + "px";
  }else{
    //不需要出现滚动条
    this.$bar.style.display = "none";
  }
}
ScrollBar.prototype.scrollToY = function(y){
  if(this.rate < 1){
    this.$bar.style.top = y + 'px';
  }
}
 
var obj = new ScrollBar({"wrap":"wrap","boxMidle":"boxMidle","content":"content","bar":"bar"});

最后看一下效果:

虽然效果很丑,但是可控,自己调一下就可以了

使用js实现一个简单的滚动条过程解析

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

Javascript 相关文章推荐
Javascript实现的鼠标经过时播放声音
May 18 Javascript
类似php的js数组的in_array函数自定义方法
Dec 27 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
vue-cli2.9.3 详细教程
Apr 23 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
vue实现移动端拖动排序
Aug 21 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 #jQuery
Elasticsearch实现复合查询高亮结果功能
Sep 10 #Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 #Javascript
js获取 gif 的帧数的代码实例
Sep 10 #Javascript
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 #Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 #Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 #Javascript
You might like
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
php输入数据统一类实例
2015/02/23 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
python二分查找算法的递归实现方法
2016/05/12 Python
python多进程实现进程间通信实例
2017/11/24 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
PyQt5每天必学之组合框
2018/04/20 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
信息专业学生学习的自我评价
2014/02/17 职场文书
元旦联欢会主持词
2014/03/26 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
2021年最新用于图像处理的Python库总结
2021/06/15 Python
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server