当前位置:Gxlcms > JavaScript > 浏览器滚动条的详细介绍

浏览器滚动条的详细介绍

时间:2021-07-01 10:21:17 帮助过:108人阅读

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最经典的应用就是回到顶部,下面代码如下:   

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:" 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.onscrollreturn;
            }
            curTop-=step
            document.documentElement.scrollTop = curTop;
            document.body.scrollTop = curTop;
        },interval)// document.documentElement.scrollTop = 0;// document.body.scrollTop = 0;    }</script>
</body>
</html>

以上就是浏览器滚动条的详细介绍的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行