JS scroll事件&楼层导航

Afengzhenguang

已于 2022-03-10 19:51:16 修改

阅读量573

点赞数

文章标签： javascript 前端 css

于 2022-03-10 19:46:13 首次发布

本文链接：https://blog.csdn.net/Afengzhenguang/article/details/123409222

版权

事件

scroll滚动事件

可以使用onscroll进行事件绑定，浏览器滚动事件可以绑定给window或者document.

window.onscroll=function(){

}
document.onscroll = function () {
    
}

获取到滚动条滚动距离

主流浏览器中可以使用document.documentElement.scrollTop

兼容写法

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

设置滚动条的滚动距离可以直接通过上面的属性进行设置

用JS实现楼层导航

HTML代码

<body>
    <div class="box">
        <div class="static"></div>
        <div class="box_item">1</div>
        <div class="box_item">2</div>
        <div class="box_item">3</div>
        <div class="box_item">4</div>
        <div class="box_item">5</div>
        <div class="static"></div>
    </div>
    <ul class="floor_list">
        <li class="floor-item" data-index="0">1</li>
        <li class="floor-item" data-index="1">2</li>
        <li class="floor-item" data-index="2">3</li>
        <li class="floor-item" data-index="3">4</li>
        <li class="floor-item" data-index="4">5</li>
    </ul>
</body>

CSS代码

<style>
        .box_item {
            width: 800px;
            margin: 0 auto;
            font-size: 40px;
            color: #fff;
            text-align: center;
        }
        
        .static {
            width: 800px;
            margin: 0 auto;
            height: 900px;
            background-color: #000;
        }
        
        .box_item:nth-child(2) {
            height: 400px;
            background-color: red;
        }
        
        .box_item:nth-child(3) {
            height: 600px;
            background-color: yellow;
        }
        
        .box_item:nth-child(4) {
            height: 500px;
            background-color: blue;
        }
        
        .box_item:nth-child(5) {
            height: 700px;
            background-color: green;
        }
        
        .box_item:nth-child(6) {
            height: 400px;
            background-color: pink;
        }
        
        ul,
        li {
            list-style: none;
        }
        
        .floor_list {
            position: fixed;
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
            display: none;
        }
        
        .floor_list.active {
            display: block;
        }
        
        .floor_list>li {
            width: 80px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            border: 1px solid black;
            background-color: aquamarine;
        }
        
        .floor-item.active {
            background-color: chartreuse;
        }
    </style>

JS 代码块

<script>
        let floorList = document.querySelector('.floor_list')
        let boxItemlist = document.querySelectorAll('.box_item')
        let floorItemlist = document.querySelectorAll('.floor-item')


        let offsetTops = []
        for (let i = 0; i < boxItemlist.length; i++) {
            // console.log(boxItemlist[i].offsetTop)
            offsetTops.push(boxItemlist[i].offsetTop)
                // console.log(offsetTops)
        }

        window.onscroll = function() {
            let scrollTop = document.documentElement.scrollTop
            if (scrollTop >= offsetTops[0]) {
                floorList.classList.add('active')
            } else {
                floorList.classList.remove('active')
            }


            for (let i = offsetTops.length - 1; i >= 0; i--) {
                if (scrollTop >= offsetTops[i]) {
                    let active = document.querySelector('.floor-item.active')
                        // 刚开始没有，会报错
                    active && active.classList.remove('active')

                    floorItemlist[i].classList.add('active')
                        // 如果遇到了大于的值，就不用再比较了跳出循环
                    break
                }
            }
        }

        floorList.onclick = function(e) {
            if (e.target.tagName === 'LI') {

                let index = e.target.dataset.index
                console.log(offsetTops[index])
                document.documentElement.scrollTop = offsetTops[index]
            }

        }
    </script>

Afengzhenguang

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS scroll事件&楼层导航

事件scroll事件是滚动事件，可以使用onscroll进行事件绑定，浏览器滚动事件可以绑定给window或者document.window.onscroll=function(){}document.onscroll = function () { }用JS实现楼层导航HTML代码<body> <div class="box"> <div class="static"></div> <
复制链接

扫一扫