javascript - 如何使用CSS使窗口自动滚动？

Question

你好，我有一个类似于这张图片的设计

红色是另一个 div 我希望窗口在鼠标悬停在 div 的红色小部分上时自动滚动，这样它会向下滚动直到显示整个 div 所以它应该看起来像这样

提前致谢

Answer 1

您不能仅使用 CSS 来滚动窗口。

使用 javascript 和 scrollIntoView方法。

简单演示

document.querySelector('[data-scrollintoview]').addEventListener('mouseenter', function(e) {
  e.target.scrollIntoView(true);
});

.black {
  background-color: #000;
  margin-bottom: 20px;
  height: 150px;
}
.red {
  background-color: #f00;
  height: 150px;
}

<div class="black"></div>
<div data-scrollintoview class="red"></div>