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

Question

您好我的设计类似于此图片

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

提前致谢

Answer 1

您无法仅使用CSS滚动窗口。

使用javascript和scrollIntoView方法。

简单演示

call_user_func

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

Answer 2

这样的事情：

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.scroll').on('mouseenter', function() {
    $("body").animate({
      scrollTop: $(this).offset().top
    }, 500);
  })
})

＆＃13;

.red {
  background-color: #f00;
}
.green {
  background-color: #0f0;
}
.red,
.green {
  margin-bottom: 10px;
  height: 300px;
  position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red scroll"></div>
<div class="green scroll"></div>

＆＃13;

＆＃13;

＆＃13;