JavaScript onscroll和scrollTop

最新推荐文章于 2021-11-30 17:33:11 发布

Sakura Teoh

最新推荐文章于 2021-11-30 17:33:11 发布

阅读量682

点赞数

分类专栏：前端文章标签： js css

本文链接：https://blog.csdn.net/qq_38877858/article/details/108038833

版权

前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

onscroll是浏览器的滑动监听事件，当滑动鼠标或者拖动滚动条的时候，就会触发onscroll事件。
scrollTop指的是浏览器页面卷起的高度。
对于scrollTop来说，有两种获取方法

使用document.documentElement.scrollTop获取
使用document.body.scrollTop获取

使用这两种方法都可以获取到浏览器卷起的高度，区别是：
方法1必须在页面写有DOCTYPE标签时才能获取到，而方法2必须在页面没有DOCTYPE的情况下才可以生效。
对于这两个方法来说，使用但不生效的时候，不会报错，那我们也可以使用短路表达式来获取浏览器卷起的高度，这样不管页面存不存在DOCTYPE的情况下都可以获取到页面卷起的高度。

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

案例：
需求
开始时顶部的导航条和 top按钮不显示，当页面卷起一定的高度时显示
当页面再往上滑动的时候会再隐藏当航条和按钮

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../reset.css">
    <style>
        body{
            height: 2000px;
        }
        #top{
            width: 100%;
            height: 50px;
            background-color: burlywood;
            display: none;
            position: fixed;
        }
        #toTop{
            width: 50px;
            height: 50px;
            background-color: #ccc;
            position: fixed;
            bottom: 30px;
            right: 30px;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
            opacity: 0;
            transition: .5s linear;
        }
        
        #top.active{
            display: block;

        }
        #toTop.active{
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="top"></div>
    <div id="toTop">TOP</div>

    <script>

        //获取元素
        var topBar = document.getElementById('top');
        var toTop = document.getElementById('toTop');

        //添加滚动事件
        window.onscroll = function () {
            //使用兼容的方法获取浏览器页面卷起的高度
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            // console.log(scrollTop);

            //如果卷起的高度大于300即显示
            if(scrollTop >= 300){
                topBar.classList.add('active');
                toTop.classList.add('active');
            }//小于300即隐藏
            else if(scrollTop < 300){
                topBar.classList.remove('active');
                toTop.classList.remove('active');
            }

            //回到顶部的点击事件
            toTop.onclick = function () {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            
            }
        }  
    </script>
</body>
</html>