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

当我们给元素加上 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"});

最后看一下效果:

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

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

时间: 2019-09-09

js将滚动条滚动到指定位置的简单实现方法

js将滚动条滚动到指定位置的简单实现方法 代码如下(主要是通过设置Location的hash属性): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

js监听html页面的上下滚动事件方法

最近在一个项目中,在写前端页面的时候,想像以前做Android时在页面时刻监听上下滚动的事件,查找资料发现由鼠标或类似用户动作触发的事件有以下图示: 不多说了,直接上代码了,经过测试可以使用: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Dome</title> <script type="text/javascript

JS简单判断滚动条的滚动方向实现方法

本文实例讲述了JS简单判断滚动条的滚动方向实现方法.分享给大家供大家参考,具体如下: 以下代码实现判断页面的滚动条的滚动方向: var sign = 80;//定义默认的向上滚与向下滚的边界 window.onscroll = window.onresize = function(){ var oScrollTop=$(window).scrollTop(); if ( oScrollTop > 80) { //write your code } if ( oScrollTop < 80) {

js固定DIV高度,超出部分自动添加滚动条的简单方法

复制代码 代码如下: function setheight()     {     var div=document.getElementById("event_basicInfo");     //div.style.width="40%";     div.style.height=400;     div.style.overflow="auto";     }     window.onload=setheight;

JS自定义滚动条效果简单实现代码

本文实例为大家分享了JS自定义滚动条效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自定义滚动条</title> <style type="text/css"> #div1 { width: 20px; height: 400px; position: relative;

javascript简单实现跟随滚动条漂浮的返回顶部按钮效果

本文实例讲述了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果.分享给大家供大家参考,具体如下: 比较优秀的一款超过一屏高度才显示的,跟随滚动条漂浮的返回顶部按钮特效代码. 运行效果如下图所示: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

javascript实现博客园页面右下角返回顶部按钮

博客园中很多博友的博客中在Page右下角都有个图标,不论屏幕怎么拉伸,都始终停留在右下角.点击后页面置顶.后面想想写一个Demo来实现这种效果吧. 一. 图标右下角固定. 1.SS 里面提供了4中布局方式. 其中fixed表示绝对定位元素.所以我们选择使用fixed来实现图标固定. absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", "right" 以及 &q

xScrollStick 跟随滚动条漂浮的JS特效

这是一个跟随滚动条漂浮的JS特效,就是说滚动条滚动而元素相对屏幕位置不变 网上有很多类似的效果,本代码比较起来有如下优点: 1. 兼容IE6.0+ & FF1.5+ 2. 使用非常简单,属于菜鸟最爱的那种拿来就能用的,见下面说明 3. 元素之间不会起冲突,一页中可以有n个特效,多元素使用无代码冗余 缺点有: 1. 只能在声明为xHTML的文档中使用 2. 元素最好放在body下 3. 滚动时不可避免的会有闪烁(已经比较轻微,但追求完美者可能觉得不爽) 使用说明: 在页面中引用JS包,然后在需要特

基于Javascript实现返回顶部按钮

一个网页内容一多, 就会分屏显示数据, 如果屏目很多, 用户访问的数据已经到了页面的底部, 这时候返回到顶部也是需要一点时间. 这样对用户体验来说, 可能就稍微逊了一点. 所以页面数据多的网页, 现在都会用一个"返回顶部"按钮来快速跳转到网页的顶部. 那现在我们就来实现这么一个功能. 这个页面我们就不写什么数据, 直接就加入一个a标签来作为返回顶部的按钮, 并给他一个class名称:top. <a href="#" class="top"&

javascript中返回顶部按钮的实现

炫酷的返回顶部功能 js核心代码 window.onscroll = function(){ var t = document.documentElement.scrollTop || document.body.scrollTop; var top_div = document.getElementById( "go" ); if( t >= 300 ) { top_div.style.display = "block"; } else { top_div.

jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]

jQuery脚本: <script type="text/javascript"> $(function() { var scrollDiv = document.createElement('div'); $(scrollDiv).attr('id', 'toTop').html('^ 返回顶部').appendTo('body'); $(window).scroll(function() { if ($(this).scrollTop() != 0) { $('#toT

vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法

这里是本小白使用时遇到的问题及个人使用的方法可能并不完美. 1.监测浏览器滚动条滚动事件及滚动距离 dmounted() { window.addEventListener("scroll", this.gundong); }, destroyed() { window.removeEventListener("scroll", this.gundong); }, methods: { gundong() { var dis = document.documentE

Vue实现返回顶部按钮实例代码

前言 本文主要介绍了Vue 实现返回顶部按钮的方法,下面话不多说,来直接看代码吧 实例代码: <template> <div class="scrollTop"> <div class="backTop" @click="backTop"> <button v-show="flag_scroll"> 返回顶部 </button> </div> //数据源

原生js实现返回顶部缓冲效果

运行原理 通过定时器30毫秒执行一次滚动条上升,每次上升的高度为当前高度的80%,这样就达到了上升缓冲的动画效果. 判断当滚动条高度超过一屏时,按钮显示,默认隐藏 知识要点 scrollTop//获取滚动条高度 需要写兼容 clientHeight//可视窗口高度 需要写兼容 setInterval//定时器 window.onscroll//滚动触发事件 完整代码 <!DOCTYPE html> <html lang="en"> <head> &l

返回顶部按钮响应滚动且动态显示与隐藏

很多的网站上都有返回顶部功能,判断滚动参数动态显示与隐藏,比较适合初学者 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g