时间戳

首页 > 解决方案 > CSS 滚动边距是做什么的

css - CSS 滚动边距是做什么的

问题描述

TL; DR：CSS 滚动边距有什么作用？

我想滚动到聊天框的底部。我使用带有虚拟 div 的 scrollIntoView，但由于我的盒子的底部填充为 8px，它偏离了 8px。我用 margin 阅读了 scrollIntoView并使用了 scroll-margin ，它就像一个魅力，但现在我想知道为什么。文档说滚动边距用于定义滚动捕捉区域，但是当我使用它时，我没有得到任何类似捕捉区域的东西。

CSS 片段：

.chat-messages-container {
  display: flex;
  flex-direction: column;
  padding: 0 8px 8px 8px;
  overflow-y: auto;
  overflow-x: hidden;
}
.chat-scroll-dummy {
  scroll-margin: 8px;
}

JS

dummyEle.scrollIntoView();

澄清一下，我得到了预期的结果，现在我想知道为什么。

标签： cssscrollscrollbar

解决方案

推荐阅读