js实现鼠标滚轮下滑样式改变
时间: 2023-12-06 15:03:41 浏览: 108
js改变鼠标的形状和样式的方法
以下是一个简单的示例,当鼠标滚轮向下滚动时,改变一个元素的背景颜色:
HTML代码:
```html
<div id="box"></div>
```
CSS代码:
```css
#box {
width: 100px;
height: 100px;
background-color: #f00;
}
```
JavaScript代码:
```javascript
var box = document.getElementById('box');
window.addEventListener('scroll', function() {
if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
box.style.backgroundColor = '#00f';
} else {
box.style.backgroundColor = '#f00';
}
});
```
这段代码使用了window的scroll事件来检测页面滚动。当页面滚动时,检查滚动距离是否大于0,如果是,则将元素的背景颜色改为蓝色,否则改为红色。
阅读全文