欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js浏览器滚动条卷去的高度scrolltop(实例讲解)

程序员文章站 2022-05-26 09:09:17
1、之前我们学习的js盒子模型中:client系列/offset系列/scrollwidth/scrollheight都是“只读”的属性-> 只能通过属性获取值,不能...

1、之前我们学习的js盒子模型中:client系列/offset系列/scrollwidth/scrollheight都是“只读”的属性-> 只能通过属性获取值,不能通过属性修改元素的样式

2、scrolltop/scrollleft:滚动条卷去的高度/宽度(这两个属性是唯一“可读写”的属性)

box.scrolltop = 0 // 直接回到容器的顶部

我们的scrolltop的值是存在边界值(最大和最小值),我们设置的值比最小值小或者比最大值大都没用,起到效果的依然是边界的值

[最小值是零]

box.scrolltop = -1000;// 直接回到了容器的顶部,没有超出

console.log(box.scrolltop) //0

[最大值 = 真实的高度-当前容器一屏幕的高度]

var maxtop = box.scrollheight - box.clientheight;

scrolltop最经典的应用就是回到顶部,下面代码如下: 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>title</title>
  <style>
    *{
      padding:0;
      margin:0;
    }
    html,body{
      width:100%;
      height:1000%;
      background:#11c900;
    }
    a{
      text-decoration: none;
      color:#000;

    }
  </style>
</head>
<body>
<a href="javascript:" rel="external nofollow" id="golink">go</a>
//a标签本身是跳转页面的,把跳转的地址写在href这个属性中
/*
  1)、不写值的话是刷新本页面
  2)、写的如果是#target,是锚点定位,定位到当前页面id为target这个位置
  3)、“javascript:”这样写是取消a标签默认跳转的行为
*/
<script>
  var golink =document.getelementbyid("golink");
  /*
    回到顶部:
    总时间(duration):500ms 
    频率(interval):多长时间走一步 10ms 
    总距离(target): 当前的位置(当前的scrolltop)- 目标的位置(0)
    步长(step):每一次走得距离  (target/duration)*interval 
  */


  /*
    这个代码是可以优化的:
    开始go按钮是不显示的,当滚动到一定的距离之后,才显示,反之隐藏 只要浏览器的滚动条在滚动,我们就需要判断go显示还是隐藏
    浏览器的滚动条滚动:拖动滚动条、鼠标滚轮、键盘上下键、pagedown/pageup键、点击滚动条的空白区域或者箭头(自主操作的行为)...我们还可以通过js控制scrolltop的值来实现滚动条的滚动
  */

  window.onscroll = function computeddisplay(){//不管怎么操作的,只要滚动条动了就会触发这个行为
    var curtop = document.documentelement.scrolltop || document.body.scrolltop;
    var curheight = document.documentelement.clientheight || document.body.clientheight;
    if(curtop>=clientheight){
      golink.style.display = "block"
    }else{
      golink.style.display = "none"
    }

  }
  golink.onclick = function(){
    this.style.display = "none";//并不会消失,因为我们滚动条往回走的时候 又会触发onscroll事件,又会进行显示
    window.onscroll = null;
    var duration = 500,interval=10,target=document.documentelement.scrolltop || document.body.scrolltop;
    var step = (target/duration)*interval;

    var timer = window.setinterval(function(){
      var curtop = document.documentelement.scrolltop || document.body.scrolltop;
      if(curtop===0){
        window.clearinterval(timer);
        window.onscroll = computeddisplay;
        //当动画结束后把对应的方法重新绑定给window.onscroll
        return;
      }
      curtop-=step
      document.documentelement.scrolltop = curtop;
      document.body.scrolltop = curtop;
    },interval)
    // document.documentelement.scrolltop = 0;
    // document.body.scrolltop = 0;
  }
</script>
</body>
</html>

以上这篇js浏览器滚动条卷去的高度scrolltop(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。