我去！初音未来！

导航

关于前端窗口滚动事件的触发效果实现的学习

问题来源

　　就前几天嘛去一家小公司试岗，刚坐下没给我安排工作，于是我就坐下看了一下工位电脑上的一些小项目，然后发现了一些之前没有做过的效果，其中就包括页面滚动到固定位置时才会触发的动画。试着做了一下他们的一个一大个页面后自知能力不足直接跑路（害，这都是题外话）。完了这些天才想起那些小的效果，于是就打算研究研究怎么做的。

学习实现

 

　　说句实话，其实那天看那项目的时候，我还稍微研究了一下，但是没有看出什么所以然。因为那天我并没有抓住这个问题的关键。去之前的前几天我一直在看CSS以及CSS3的一些新特性，所以惯性地以为，这种滚动触发的额效果能通过CSS实现。实际上，能个屁啊，看了CSS中伪类的各种各种，根本没看到和滚动触发的相关的内容。

　　然后这几天我开窍了，“滚动触发的效果”那关键在于"滚动"和”触发“嘛，那不就是JS负责的部分嘛。于是就查了scroll相关的JS方法。最终查到了onscroll和scrollTop这两个小东东。

　　onscroll是一个事件，在滚动条滚动的时候会触发一个方法。这个滚动条也是有指向的，通常指向window,必要时我们也可以指向一个页面元素，这个页面元素必须要有滚动条，也就是要设置元素overflow属性的值为scroll。(但说实话这个指向特定元素的onscroll事件有什么用，或许可以做一个滚轮控制大小的小部件或者滚轮控制的轮播图？)。

　　scrollTop则是显示页面元素滚轮顶部位置的一个方法，它会返回一个Number型的字符用于表示滚轮的位置，他可以通过document.documentElement指向页面的根部，也就是原件最外围滚动条的的顶部位置。同时它也和上面的onscroll一样，能够显示有滚动条元素的一个滚动条顶部的位置。

 

　　既然已经知道了onscroll和scrollTop这两大神器，那那天滚动到指定位置触发效果的问题也就迎刃而解。我们可以在给window绑定一个onscroll监听事件，然后通过scrollTop获取页面滚动条的位置，scrollTop的值和某个指定的位置时（这里可以用判断语句对位置进行判断），切换或设置某个页面元素的样式（页面元素可以设定过渡效果或者使用动画）。

　　下面我随便做了个通过scrollTop位置修改页头透明度的案例给自己或者有需要的人参考一下。（美观度就不考虑了。。。）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        body{
            margin: 0px;
        }
            .hudi{
                width: 100%;
                height: 200px;background-color: #7FFFD4;
                position: sticky;
                top: 0px;
            }
            .next{
                width: 100%;
                height: 2000px;
                background-color: brown;
            }
            .text{
                height: 300px;
                width: 100%;
                overflow-y: scroll;
                background-color: #FFFFFF;
            }
        </style>
    </head>
    <body>
        <div id="header" class="hudi">
            
        </div>
        <div id="con" class="next">
            <div id="te" class="text">
                <p>123</p>                
                <p>123</p>                
                <p>123</p>                
                <p>123</p>                
                <p>123</p>                
                <p>123</p>                
                <p>123</p>                
                <p>123</p>                
                <p>123</p>                
                <p>123</p>                
                <p>123</p>                
            </div>
        </div>
        <script type="text/javascript">
            // var header_top = document.getElementById("con").top
            // var sTop = document.getElementById("header").scrollTop
            window.onscroll = function(){
                let sTop = document.documentElement.scrollTop
                var he = document.getElementById("header")
                let hHeight = parseInt(getComputedStyle(he,null).height)
                console.log("st:"+sTop)
                console.log("op:"+sTop/hHeight)
                let op = sTop/hHeight
                document.getElementById("header").style.backgroundColor = `rgba(200,200,200,${op})`
                
            }
            document.getElementById("te").onscroll = function(){
                let sTop = document.getElementById("te").scrollTop
                console.log(sTop)
            }
        </script>
    </body>
</html>

 

效果你们自己试试吧，不过说实话这随笔也是挺乱的，看不懂的图一乐就好，我先跑路了（doge）。

 

posted on 2021-07-21 16:32  你完全不写博客是吗？  阅读(661)  评论(0)  编辑  收藏  举报