溢出：滚动； CSS 在页面边缘添加边框？

Question

我有一个 div css:

overflow: scroll;

但是，浏览器似乎添加了一个边框 (?) 如果滚动条可见（即使它不可见），滚动条应该出现在该边框中。我已经检查了开发工具中的 css，但找不到对此样式的引用。如何隐藏此滚动条样式？

这是一个示例屏幕截图 - 红色箭头指向屏幕的右边缘，我没有添加边框样式。如果我删除 overflow: scroll; 样式规则，它就会消失。

请注意，我在 Chrome 和 Safari（两者的最新版本）中都看到了这种行为。

Answer 1

将溢出属性设置为 'scroll' 可将内容裁剪到合适的大小。这可以防止内容在水平和垂直方向上超出其容器边界。它还会水平和垂直放置滚动条，无论是否需要。

这将显示两个滚动条：

<div id="div1">
  Content
</div>

#div1 {
    overflow:scroll;
}

'auto' 值将根据需要垂直、水平或同时显示滚动条。

将CSS改为：

#div1 {
    overflow:auto;
}

您还可以仅针对水平或垂直设置溢出属性。如果你想保证不能有垂直滚动条，你可以在 auto 上使用它。

将CSS改为：

#div1 {
    overflow-x:scroll; /* Set the overflow horizontal property to clip the content 
and display a horizontal scroll bar. */
} 
    overflow-y:hidden; /* Set the overflow vertical property to clip the content, 
hide the vertical scroll bar and any content outside of the top/bottom borders. */
}

溢出：滚动； CSS 在页面边缘添加边框？

overflow: scroll; CSS adding border to edge of page?

html

css

scroll

border