Question

我的页面中间有一个很好的div。在顶部有一个菜单div。在左边还有另一个div。

div有边缘，所以它们之间有很好的排水沟。到现在为止还挺好。

唯一的问题是，如果页面中间的div在内容中增长滚动条出现（这没关系）但我想要的是在div和滚动条之间有一个装订线？可能吗？

+-----------+  ^   (see gap 20px between scrollbar and div)
|           |  |
|           |  | 
|           |  |
|           |  |
|           |  |
|           |  |
+-----------+

Answer 1

div需要padding-right:20px;，以便滚动条和内容之间的空间变为20px。

<强> CHECK IT OUT

div
{
    overflow-y:auto;
    width:100px;
    height:100px;
    padding-right:20px;
}

Answer 2

尝试使用自定义滚动条，例如this，以便您有更多选项来自定义

Answer 3

您可以创建一个具有滚动条（overflow-y属性）的外部容器，并使用您想要的背景放置一个较小的内容容器，因此内部元素和外部滚动条之间的间隙模拟了一个装订线：

<强> HTML

<div class="outer">
    <div class="inner">
       <!-- content goes here -->
    </div>
</div>

<强> CSS

.outer {
  width:80%;
  height:150px;
  overflow-y:scroll;
}

.inner {
  width:95%;
  background:White;
}

Demo

您还可以通过将width:95%替换为margin-right值来固定装订线的宽度，例如：

margin-right:20px; /*20px gap between inner and scrollbar*/

Demo

也可以使用单个元素重现这一点，使用设置为content-box的{{3}}属性并向元素添加一些padding-right：

.content {
  width:80%;
  height:150px;
  overflow-y:scroll;
  background:white;
  background-clip: content-box;
  padding-right:40px;
}

background-clip

虽然没有IE＆lt; = 8支持这种方法。此外，padding值应包含滚动条的宽度，否则，使用非常低的填充值会使装订线隐藏在滚动条下方。如果额外的填充会破坏您的布局，您可以通过将Demo属性设置为border-box来解决此问题。

CSS：滚动条右侧的排水沟

3 个答案: