scroll事件及其应用

最新推荐文章于 2023-11-26 10:43:02 发布

江呱呱

最新推荐文章于 2023-11-26 10:43:02 发布

阅读量1.5k

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_46500485/article/details/108393331

版权

js 专栏收录该内容

76 篇文章 2 订阅

订阅专栏

scroll事件及其应用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul li {
            height: 600px;
            border: 1px solid #ccc;
            list-style: none;
        }
        
        .header {
            height: 500px;
            background-color: red;
        }
        
        ol {
            list-style: none;
            width: 700px;
            display: flex;
            margin: 0 auto;
            position: sticky;
            top: 0;
            text-align: center;
        }
        
        ol li {
            flex: 1;
            cursor: pointer;
        }
        
        .backTop {
            position: fixed;
            right: 120px;
            bottom: 120px;
            padding: 20px;
            border: 1px solid #ccc;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <div class="header"></div>
    <ol>
        <li><a>去1层</a></li>
        <li><a>去2层</a></li>
        <li><a>去3层</a></li>
        <li><a>去4层</a></li>
        <li><a>去5层</a></li>
        <li><a>去6层</a></li>
        <li><a>去7层</a></li>
        <li><a>去8层</a></li>
        <li><a>去9层</a></li>
        <li><a>去10层</a></li>
        <li><a>去11层</a></li>
        <li><a>去12层</a></li>
    </ol>
    <ul>
        <li>1层</li>
        <li>2层</li>
        <li>3层</li>
        <li>4层</li>
        <li>5层</li>
        <li>6层</li>
        <li>7层</li>
        <li>8层</li>
        <li>9层</li>
        <li>10层</li>
        <li>11层</li>
        <li>12层</li>
    </ul>
    <div id="backTop" class="backTop">回到顶部</div>
    <script>
        var backTop = document.querySelector("#backTop")
            //获取页面的高度
        var pageHeight = document.body.clientHeight
            //获取视口高度
        let clientHeight = document.documentElement.clientHeight;
        let timer = null;
        //scroll 事件  当页面卷动值发送变化的时候触发
        document.onscroll = function() {
            // console.log(1111);
            //兼容IE浏览器
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            // console.log(pageHeight - clientHeight - scrollTop);
            //判断是否滚动到页面底部了
            if (pageHeight - clientHeight - scrollTop < 300) {
                clearTimeout(timer);
                //为了不让浏览器频繁触发一个已经设置完成的事件
                timer = setTimeout(function() {
                    console.log(1);
                    backTop.style.display = 'block'
                }, 1000)
                //节流模式
            } else {
                backTop.style.display = 'none'
            }

        }
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul li {
            height: 600px;
            border: 1px solid #ccc;
            list-style: none;
        }
        
        .header {
            height: 500px;
            background-color: red;
        }
        
        ol {
            list-style: none;
            width: 1200px;
            display: flex;
            margin: 0 auto;
            position: sticky;
            top: 0;
            text-align: center;
        }
        
        ol li {
            flex: 1;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <div class="header"></div>
    <ol>
        <li><a>去1层</a></li>
        <li><a>去2层</a></li>
        <li><a>去3层</a></li>
        <li><a>去4层</a></li>
        <li><a>去5层</a></li>
        <li><a>去6层</a></li>
        <li><a>去7层</a></li>
        <li><a>去8层</a></li>
        <li><a>去9层</a></li>
        <li><a>去10层</a></li>
        <li><a>去11层</a></li>
        <li><a>去12层</a></li>
    </ol>
    <ul>
        <li>1层</li>
        <li>2层</li>
        <li>3层</li>
        <li>4层</li>
        <li>5层</li>
        <li>6层</li>
        <li>7层</li>
        <li>8层</li>
        <li>9层</li>
        <li>10层</li>
        <li>11层</li>
        <li>12层</li>
    </ul>
    <script>
        //scrollTop 获取页面的卷动值(滚动值)
        //document.documentElement.scrollTop||document.body.scrollTop

        // setTimeout(function() {
        //     //如果要设置  请两条分开书写
        //     document.documentElement.scrollTop = 4000;
        //     document.body.scrollTop = 4000;

        // }, 3000)

        //获取的所有a标签
        //将伪数组转化为数组  以便使用数组的方法
        let arr = Array.from(document.querySelectorAll("a"));
        arr.forEach(function(value, index) {
            value.onclick = function() {
                // console.log(index);
                document.documentElement.scrollTop = 500 + 21 + index * 602
            }
        })
    </script>
</body>

</html>

江呱呱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
scroll事件及其应用

scroll事件及其应用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
复制链接

扫一扫