css如何监听鼠标的滚动

CSS可以通过监听鼠标滚动来实现一些有趣的效果。在CSS中实现这个功能的方式有多种，下面我们将通过代码演示的方式来介绍一些常见的方法。

/* 通过伪类实现鼠标滚动监听 */
div:hover {
  overflow-y: scroll;
}

/* 通过transform实现鼠标滚动监听 */
div {
  transform: scale(1);
  transition: transform .3s;
}

div:hover {
  transform: scale(1.1);
}

/* 通过Javascript实现鼠标滚动监听 */
window.addEventListener("scroll",function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 100) {
    document.getElementById("header").classList.add("active");
  } else {
    document.getElementById("header").classList.remove("active");
  }
});

第一种方法是通过伪类来实现鼠标滚动监听。当鼠标移动到元素上时，将该元素的overflow-y属性设置为scroll，就可以实现滚动监听的效果。

第二种方法是通过transform来实现鼠标滚动监听。当鼠标移动到元素上时，使用CSS的transition属性进行动画过渡，将元素的transform属性由默认的scale(1)变为scale(1.1)。这样就可以实现一个简单的放大效果，让用户感受到鼠标滚动的变化。

第三种方法是通过Javascript来实现鼠标滚动监听。通过给窗口添加一个scroll事件，可以监听到用户的滚动行为。通过获取到当前页面的滚动距离scrollTop，可以实现一些特殊的页面效果，比如当scrollTop大于100时，让页面的某个元素出现或隐藏。

总之，通过CSS实现鼠标滚动监听可以为页面增加一些趣味性和交互性，让用户更加喜欢使用你的网站。