Dw如何使滚轮滚动div变色或者添加颜色

Dw如何使滚轮滚动div变色或者添加颜色(可以使用html,css,JavaScript)

<!DOCTYPE html>
<html>
<head>
    <style>
        #myDiv {
            width: 200px;
            height: 200px;
            background-color: rgb(128, 128, 128);
        }
    </style>
</head>
<body>
    <div id="myDiv"></div>

    <script>
        var div = document.getElementById("myDiv");
        var currentBrightness = 128; // 当前亮度
        
        function handleScroll(event) {
            event = window.event || event;
            var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
            
            // 向前滚动亮度减小，向后滚动亮度增加
            if (delta < 0) {
                currentBrightness -= 10;
            } else {
                currentBrightness += 10;
            }
            
            // 确保亮度在0到255之间
            currentBrightness = Math.max(0, Math.min(255, currentBrightness));
            
            // 更新背景颜色
            div.style.backgroundColor = 'rgb(' + currentBrightness + ',' + currentBrightness + ',' + currentBrightness + ')';
            
            // 阻止默认的滚动行为
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        }
        
        // 监听鼠标滚轮事件
        if (window.addEventListener) {
            window.addEventListener("DOMMouseScroll", handleScroll, false);
            window.onmousewheel = document.onmousewheel = handleScroll;
        } else {
            window.attachEvent("onmousewheel", handleScroll);
        }
    </script>
</body>
</html>

不知道你这个问题是否已经解决, 如果还没有解决的话:

你可以看下这个问题的回答https://ask.csdn.net/questions/7449669
这篇博客也不错, 你可以看下DIV布局——仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载

除此之外, 这篇博客: HTML学生个人网站作业设计：电影网站设计——电影资讯博客(5页) HTML+CSS+JavaScript 简单DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载中的 三、代码展示 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

代码说明：以下仅展示部分代码供参考~

<!DOCTYPE html>

<head>
    <meta charset="utf-8" />
    <title>个人网页设计</title>
    <link href="css/style.css" rel="stylesheet" />
</head>

<body>
    <div id="wrapper">
        <div id="header">
            <a href="#"><img src="images/logo.png" class="logo"/></a>
        </div>
        <div id="menu">
            <ul>
                <li><a href="index.html">个人主页</a></li>
                <li><a href="jieshao.html">故事介绍</a></li>
                <li><a href="renwu.html">主要人物</a></li>
                <li><a href="meitu.html">个人美图</a></li>
                <li><a href="zhuce.html">注册用户</a></li>
                <li><a href="liuyan.html">随笔留言</a></li>
            </ul>
        </div>
        <div id="main">
            <div class="content">
                <ul class="list">
                    <li>
                        <img src="images/zy1.jpg" />
                        <h5>“草帽”蒙奇·D·路飞</h5>
                        <p>初次登场：漫画第1话 年龄：17岁→19岁 生日：5月5日 血型：F型 身高：172cm→174cm 身份：草帽 故乡：东海·风车村 ...</p>
                        <a href="#">详情...</a>
                    </li>
                    <li>
                        <img src="images/zy2.jpg" />
                        <h5>“小贼猫”娜美</h5>
                        <p>初次登场：漫画第8话 年龄：18岁→20岁 生日：7月3日 血型：X型 身份：阿龙海贼团测量员→草帽 故乡：东海▪可可亚西村...</p>
                        <a href="#">详情...</a>
                    </li>
                    <li>
                        <img src="images/zy3.jpg" />
                        <h5>“海贼猎人”罗罗诺亚·索隆</h5>
                        <p>初次登场：漫画第3话 年龄：19岁→21岁 生日：11月11日 血型：XF型 身份：东海海贼赏金猎人→草员 故乡：东海·霜月村...</p>
                        <a href="#">详情...</a>
                    </li>
                    <li>
                        <img src="images/zy4.jpg" />
                        <h5>“GOD”▪乌索普</h5>
                        <p>初次登场：漫画第23话 年龄：17岁→19岁 生日：4月1日 血型：S型 身份：乌索普海贼团船长→狙击手 故乡：东海▪西罗普村...</p>
                        <a href="#">详情...</a>
                    </li>
                </ul>
            </div>
            <div class="sidebar">
                <div class="denglu">
                    <h2>用户登录</h2>
                    <p><span>账号：</span><input type="text" /></p>
                    <p><span>密码：</span><input type="password" /></p>
                    <div class="btn">
                        <a href="#"><img src="images/denglu.png" /></a>
                        <a href="#"><img src="images/zhuce.png" /></a>
                    </div>
                </div>
                <div class="chengyuan">
                    <h2>草帽海贼团成员</h2>
                    <ul>
                        <li><a href="#">“草帽”蒙奇·D·路飞</a></li>
                        <li><a href="#">“海贼猎人”罗罗诺亚·索隆</a></li>
                        <li><a href="#">“小贼猫”娜美</a></li>
                        <li><a href="#">“GOD”▪乌索普</a></li>
                        <li><a href="#">“黑足”山治</a></li>
                        <li><a href="#">“爱吃棉花糖的驯鹿”托尼托尼·乔巴</a></li>
                        <li><a href="#">“恶魔之子”妮可·罗宾</a></li>
                        <li><a href="#">“改造人”弗兰奇</a></li>
                        <li><a href="#">“灵魂之王”布鲁克 </a></li>
                    </ul>
                    <img src="images/chengyuan.jpg" />
                </div>
            </div>
        </div>
        <div id="footer">
            <p>底部信息</p>
        </div>
    </div>
</body>

</html>

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

这个费用js 实现，监听一下div 距离顶部的位置给个随机色