鼠标悬停时垂直滚动div

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

.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;
}

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

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