鼠标悬停时垂直滚动div

是一种常见的网页交互效果，通过鼠标悬停在指定区域上方时，使该区域内的内容在垂直方向上进行滚动。这种效果可以增加网页的交互性和用户体验。

实现鼠标悬停时垂直滚动div的方法有多种，以下是一种常见的实现方式：

HTML结构：

<div class="scrollable-div">
  <ul>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
    <li>内容4</li>
    <li>内容5</li>
  </ul>
</div>

CSS样式：

.scrollable-div {
  width: 300px; /* 设置滚动区域的宽度 */
  height: 200px; /* 设置滚动区域的高度 */
  overflow: auto; /* 设置溢出内容时显示滚动条 */
}

.scrollable-div ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.scrollable-div li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.scrollable-div li:hover {
  background-color: #f5f5f5;
}

JavaScript交互：

// 为滚动区域添加鼠标悬停事件
var scrollableDiv = document.querySelector('.scrollable-div');
scrollableDiv.addEventListener('mouseover', function() {
  scrollableDiv.style.overflowY = 'scroll'; // 显示垂直滚动条
});

scrollableDiv.addEventListener('mouseout', function() {
  scrollableDiv.style.overflowY = 'auto'; // 隐藏垂直滚动条
});

这样，当鼠标悬停在滚动区域上方时，会显示垂直滚动条，用户可以通过滚动条滚动内容；当鼠标离开滚动区域时，垂直滚动条会隐藏。

鼠标悬停时垂直滚动div的应用场景包括但不限于：