溢出：滚动; CSS添加边框到页面边缘？

Question

我有以下css的div：

overflow: scroll;

但是，浏览器（？）似乎有一个边框，如果滚动条可见（即使它不可见），滚动条应该会出现。我在dev工具中检查了css，并且找不到这个样式的引用。如何隐藏此滚动条样式？

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

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

Answer 1

将overflow属性设置为'scroll'会将内容剪辑为大小。这可以防止内容水平和垂直地超出容器边框。无论是否需要，它还可以水平和垂直放置滚动条。

这将显示两个滚动条：

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

#div1 {
    overflow:scroll;
}

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

将CSS更改为：

#div1 {
    overflow:auto;
}

您也可以仅为水平或垂直设置overflow属性。如果要保证不能有垂直滚动条，可以使用此方法。

将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. */
}