滚动滑轮改变元素的颜色

Posted 芜独独

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了滚动滑轮改变元素的颜色相关的知识,希望对你有一定的参考价值。

代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * 
            margin: 0;
            padding: 0;
        
        
        .div500 
            width: 500px;
            height: 120px;
            margin: 0 auto;
            background-color: #409EFF;
        
        
        .main 
            width: 100px;
            height: 500px;
            margin: 0 auto;
            background-color: #F56C6C;
        
    </style>
</head>

<body>
    <div class="main"></div>
    <!-- 横条 -->
    <div class="div500" id="div1"></div>

    <div class="main"></div>

</body>

<script>
    let last = 300;
    window.onscroll = function() 
        // 取出div1
        var _div1 = document.getElementById('div1');
        // getBoundingClientRect用于获取某个元素相对于视窗的位置集合
        var _area = div1.getBoundingClientRect();
        // console.log(_area);

        // 打印该元素上边距的值
        console.log(_area.top)
        console.log(last);
        if (_area.top > last) 
            _div1.style.backgroundColor = '#67C23A';
         else 
            _div1.style.backgroundColor = '#409EFF';
        
    
</script>

</html>

效果图


以上是关于滚动滑轮改变元素的颜色的主要内容,如果未能解决你的问题,请参考以下文章

JQ的offset().top与JS的getBoundingClientRect区别详解,JS获取元素距离视窗顶部可变距离

为啥鼠标滑轮可以滚动div里面的内容,手机端手指滑动就不能滑动

word滚动鼠标滑轮会放大缩小怎么办

为子组件(useRef)反应滑轮事件?

Winform鼠标滑轮控制自定义滚动条

css如何在页面内出现滚动条的地方禁止鼠标滑轮滚动