如何向 CSS webkit 滚动条添加边距？

How do I add a margin to a CSS webkit scrollbar?

提问by user3757637

Here's my site with the current webkit scrollbar: http://willwhitehead.com

这是我的网站，带有当前的 webkit 滚动条：http: //willwhitehead.com

I'd like to create a gap between the scrollbar and the right edge of the screen.

我想在滚动条和屏幕右边缘之间创建一个间隙。

How do I achieve this?

我如何实现这一目标？

Thanks in advance,

提前致谢，

Will

将要

回答by Victor Mendizabal Coelho

There's yet another solution which might fit easily in everybody's project. If you use a transparent border as a margin and a box-shadow with inset to set it's color, you'd get the result you are hoping for.

还有另一种解决方案可能很容易适合每个人的项目。如果您使用透明边框作为边距并使用带插图的框阴影来设置其颜色，您将获得您希望的结果。

For instance:

例如：

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 10px 10px green;
    border: solid 3px transparent;
}

::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 10px 10px red;
    border: solid 3px transparent;
}

This may be an ugly scrollbar, but it serves as an example to what I mean.

这可能是一个丑陋的滚动条，但它作为我的意思的一个例子。

However, in Chrome, the transparent property won't work, so you would have to manually insert the color that would fit with the background, preferably, the background-color.

但是，在 Chrome 中，透明属性不起作用，因此您必须手动插入适合背景的颜色，最好是背景颜色。

回答by jonhurlock

This is a horrible hack but seems to work. Use the ::-webkit-scrollbarselector, give the bar a fixed with of x pixels. then set the left property to some -px value.

这是一个可怕的黑客，但似乎有效。使用::-webkit-scrollbar选择器，给条形固定 x 像素。然后将 left 属性设置为某个 -px 值。

::-webkit-scrollbar {
    width: 10px; left:-100px;
}

Alternatively you could do the following:

或者，您可以执行以下操作：

Give the ::-webkit-scrollbara fixed width of say 30px, then set the border of the ::-webkit-scrollbar-thumbto be the padding you wish to scroll bar to away from the right hand side of the screen. and set the background of border to match that of the background colour.

给定::-webkit-scrollbar一个固定的宽度，比如 30px，然后将边框设置为::-webkit-scrollbar-thumb您希望滚动条远离屏幕右侧的填充。并设置边框的背景以匹配背景颜色。

This will give the illusion that the scroll bar floating right of the window, though in actual fact it is not. You can see this in the fiddle below.

这会产生滚动条浮动在窗口右侧的错觉，但实际上并非如此。您可以在下面的小提琴中看到这一点。

body {
  background: blue;
}
*::-webkit-scrollbar {
  width: 30px;
}
*::-webkit-scrollbar-track {
  background: green;
  /* change me to blue to match the background */
}
*::-webkit-scrollbar-thumb {
  background: red;
  border: 10px yellow solid;
  /* change border color to blue to match the background */
}

<p>The idea of Rang De was sown in the year 2006 - the same year when Mr. Yunus was awarded the Nobel Prize for his work with Grameen Bank. The motivation for starting Rang De was the belief that the peer to peer lending model could be leveraged to lower
  the cost of microcredit and reach out to under-served communities. RangDe.Org went live on January 26th 2008 (16:48 hrs to be precise!).</p>
<p>
  <h5>The spirit of Rang De</h5>
  The name Rang De was decided after a lot of thought. It goes back to the patriotic struggle for Independence. We believe that a similar movement with the same kind of urgency is required to address poverty in India. The words Rang De also denote colour
  and exuberance and that is the significance we want our efforts to have for the people we reach out to.</p>
<p>The idea of Rang De was sown in the year 2006 - the same year when Mr. Yunus was awarded the Nobel Prize for his work with Grameen Bank. The motivation for starting Rang De was the belief that the peer to peer lending model could be leveraged to lower
  the cost of microcredit and reach out to under-served communities. RangDe.Org went live on January 26th 2008 (16:48 hrs to be precise!).</p>
<p>
  <h5>The spirit of Rang De</h5>
  The name Rang De was decided after a lot of thought. It goes back to the patriotic struggle for Independence. We believe that a similar movement with the same kind of urgency is required to address poverty in India. The words Rang De also denote colour
  and exuberance and that is the significance we want our efforts to have for the people we reach out to.</p>
<p>The idea of Rang De was sown in the year 2006 - the same year when Mr. Yunus was awarded the Nobel Prize for his work with Grameen Bank. The motivation for starting Rang De was the belief that the peer to peer lending model could be leveraged to lower
  the cost of microcredit and reach out to under-served communities. RangDe.Org went live on January 26th 2008 (16:48 hrs to be precise!).</p>
<p>
  <h5>The spirit of Rang De</h5>
  The name Rang De was decided after a lot of thought. It goes back to the patriotic struggle for Independence. We believe that a similar movement with the same kind of urgency is required to address poverty in India. The words Rang De also denote colour
  and exuberance and that is the significance we want our efforts to have for the people we reach out to.</p>
<p>The idea of Rang De was sown in the year 2006 - the same year when Mr. Yunus was awarded the Nobel Prize for his work with Grameen Bank. The motivation for starting Rang De was the belief that the peer to peer lending model could be leveraged to lower
  the cost of microcredit and reach out to under-served communities. RangDe.Org went live on January 26th 2008 (16:48 hrs to be precise!).</p>
<p>
  <h5>The spirit of Rang De</h5>
  The name Rang De was decided after a lot of thought. It goes back to the patriotic struggle for Independence. We believe that a similar movement with the same kind of urgency is required to address poverty in India. The words Rang De also denote colour
  and exuberance and that is the significance we want our efforts to have for the people we reach out to.</p>
<p>The idea of Rang De was sown in the year 2006 - the same year when Mr. Yunus was awarded the Nobel Prize for his work with Grameen Bank. The motivation for starting Rang De was the belief that the peer to peer lending model could be leveraged to lower
  the cost of microcredit and reach out to under-served communities. RangDe.Org went live on January 26th 2008 (16:48 hrs to be precise!).</p>
<p>
  <h5>The spirit of Rang De</h5>
  The name Rang De was decided after a lot of thought. It goes back to the patriotic struggle for Independence. We believe that a similar movement with the same kind of urgency is required to address poverty in India. The words Rang De also denote colour
  and exuberance and that is the significance we want our efforts to have for the people we reach out to.</p>
<p>The idea of Rang De was sown in the year 2006 - the same year when Mr. Yunus was awarded the Nobel Prize for his work with Grameen Bank. The motivation for starting Rang De was the belief that the peer to peer lending model could be leveraged to lower
  the cost of microcredit and reach out to under-served communities. RangDe.Org went live on January 26th 2008 (16:48 hrs to be precise!).</p>
<p>
  <h5>The spirit of Rang De</h5>
  The name Rang De was decided after a lot of thought. It goes back to the patriotic struggle for Independence. We believe that a similar movement with the same kind of urgency is required to address poverty in India. The words Rang De also denote colour
  and exuberance and that is the significance we want our efforts to have for the people we reach out to.</p>

---

---

However, probably the best thing is to do is wrap all your content in a container div. Then modify the css for the container see:

但是，最好的办法可能是将所有内容包装在容器 div 中。然后修改容器的css见：

body {
  background: blue;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
#container {
  position: absolute;
  left: 0;
  overflow-y: scroll;
  right: 60px;
  height: 100%;
  background: gold;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
::-webkit-scrollbar {
  width: 20px;
}
::-webkit-scrollbar-track {
  background: red;
}
::-webkit-scrollbar-thumb {
  background: green;
}

<div id="container">
  <p>The idea of Rang De was sown in the year 2006 - the same year when Mr. Yunus was awarded the Nobel Prize for his work with Grameen Bank. The motivation for starting Rang De was the belief that the peer to peer lending model could be leveraged to lower
    the cost of microcredit and reach out to under-served communities. RangDe.Org went live on January 26th 2008 (16:48 hrs to be precise!).</p>
  <p>
    <h5>The spirit of Rang De</h5>
    The name Rang De was decided after a lot of thought. It goes back to the patriotic struggle for Independence. We believe that a similar movement with the same kind of urgency is required to address poverty in India. The words Rang De also denote colour
    and exuberance and that is the significance we want our efforts to have for the people we reach out to.</p>
  <p>The idea of Rang De was sown in the year 2006 - the same year when Mr. Yunus was awarded the Nobel Prize for his work with Grameen Bank. The motivation for starting Rang De was the belief that the peer to peer lending model could be leveraged to lower
    the cost of microcredit and reach out to under-served communities. RangDe.Org went live on January 26th 2008 (16:48 hrs to be precise!).</p>
  <p>
    <h5>The spirit of Rang De</h5>
    The name Rang De was decided after a lot of thought. It goes back to the patriotic struggle for Independence. We believe that a similar movement with the same kind of urgency is required to address poverty in India. The words Rang De also denote colour
    and exuberance and that is the significance we want our efforts to have for the people we reach out to.</p>
  <p>The idea of Rang De was sown in the year 2006 - the same year when Mr. Yunus was awarded the Nobel Prize for his work with Grameen Bank. The motivation for starting Rang De was the belief that the peer to peer lending model could be leveraged to lower
    the cost of microcredit and reach out to under-served communities. RangDe.Org went live on January 26th 2008 (16:48 hrs to be precise!).</p>
  <p>
    <h5>The spirit of Rang De</h5>
    The name Rang De was decided after a lot of thought. It goes back to the patriotic struggle for Independence. We believe that a similar movement with the same kind of urgency is required to address poverty in India. The words Rang De also denote colour
    and exuberance and that is the significance we want our efforts to have for the people we reach out to.</p>
  <p>The idea of Rang De was sown in the year 2006 - the same year when Mr. Yunus was awarded the Nobel Prize for his work with Grameen Bank. The motivation for starting Rang De was the belief that the peer to peer lending model could be leveraged to lower
    the cost of microcredit and reach out to under-served communities. RangDe.Org went live on January 26th 2008 (16:48 hrs to be precise!).</p>
  <p>
    <h5>The spirit of Rang De</h5>
    The name Rang De was decided after a lot of thought. It goes back to the patriotic struggle for Independence. We believe that a similar movement with the same kind of urgency is required to address poverty in India. The words Rang De also denote colour
    and exuberance and that is the significance we want our efforts to have for the people we reach out to.</p>
  <p>The idea of Rang De was sown in the year 2006 - the same year when Mr. Yunus was awarded the Nobel Prize for his work with Grameen Bank. The motivation for starting Rang De was the belief that the peer to peer lending model could be leveraged to lower
    the cost of microcredit and reach out to under-served communities. RangDe.Org went live on January 26th 2008 (16:48 hrs to be precise!).</p>
  <p>
    <h5>The spirit of Rang De</h5>
    The name Rang De was decided after a lot of thought. It goes back to the patriotic struggle for Independence. We believe that a similar movement with the same kind of urgency is required to address poverty in India. The words Rang De also denote colour
    and exuberance and that is the significance we want our efforts to have for the people we reach out to.</p>
  <p>The idea of Rang De was sown in the year 2006 - the same year when Mr. Yunus was awarded the Nobel Prize for his work with Grameen Bank. The motivation for starting Rang De was the belief that the peer to peer lending model could be leveraged to lower
    the cost of microcredit and reach out to under-served communities. RangDe.Org went live on January 26th 2008 (16:48 hrs to be precise!).</p>
  <p>
    <h5>The spirit of Rang De</h5>
    The name Rang De was decided after a lot of thought. It goes back to the patriotic struggle for Independence. We believe that a similar movement with the same kind of urgency is required to address poverty in India. The words Rang De also denote colour
    and exuberance and that is the significance we want our efforts to have for the people we reach out to.</p>
</div>

回答by Mihai Serban

::-webkit-scrollbar {
  width: 14px;
}

/* 4px scroll thumb. 10px margin from right margin */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 14px 14px transparent;
  border: solid 4px transparent;
}

::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 14px 14px #bbbbbe;
  border: solid 4px transparent;
  border-radius: 14px;
}

::-webkit-scrollbar-button {
  display: none;
}

codesandbox example - https://codesandbox.io/s/5vk9246qyk

代码和框示例 - https://codesandbox.io/s/5vk9246qyk

webkit-scrollbar supported by 93.02% of total browsers at the time or writing https://www.caniuse.com/#search=webkit-scrollbar

webkit-scrollbar 被当时 93.02% 的浏览器支持或写作https://www.caniuse.com/#search=webkit-scrollbar

回答by Simon

Another solution would be to make use of the background-clipproperty by using a transparent border and telling css to only fill the content greenand not the border (possible through background-clip: content-box)

另一种解决方案是background-clip通过使用透明边框并告诉 css 只填充内容green而不是边框来利用该属性（可能通过background-clip: content-box）

body {
  background: white;
}

::-webkit-scrollbar {
    width: 20px;
}

::-webkit-scrollbar-thumb {
    background: green;
    background-clip: content-box;
    border: 5px solid transparent;
}

<p>The idea of Rang De was sown in the year 2006 - the same year when Mr. Yunus was awarded the Nobel Prize for his work with Grameen Bank. The motivation for starting Rang De was the belief that the peer to peer lending model could be leveraged to lower
  the cost of microcredit and reach out to under-served communities. RangDe.Org went live on January 26th 2008 (16:48 hrs to be precise!).</p>
<p>
  <h5>The spirit of Rang De</h5>
  The name Rang De was decided after a lot of thought. It goes back to the patriotic struggle for Independence. We believe that a similar movement with the same kind of urgency is required to address poverty in India. The words Rang De also denote colour
  and exuberance and that is the significance we want our efforts to have for the people we reach out to.</p>
<p>The idea of Rang De was sown in the year 2006 - the same year when Mr. Yunus was awarded the Nobel Prize for his work with Grameen Bank. The motivation for starting Rang De was the belief that the peer to peer lending model could be leveraged to lower
  the cost of microcredit and reach out to under-served communities. RangDe.Org went live on January 26th 2008 (16:48 hrs to be precise!).</p>
<p>
  <h5>The spirit of Rang De</h5>
  The name Rang De was decided after a lot of thought. It goes back to the patriotic struggle for Independence. We believe that a similar movement with the same kind of urgency is required to address poverty in India. The words Rang De also denote colour
  and exuberance and that is the significance we want our efforts to have for the people we reach out to.</p>
<p>The idea of Rang De was sown in the year 2006 - the same year when Mr. Yunus was awarded the Nobel Prize for his work with Grameen Bank. The motivation for starting Rang De was the belief that the peer to peer lending model could be leveraged to lower
  the cost of microcredit and reach out to under-served communities. RangDe.Org went live on January 26th 2008 (16:48 hrs to be precise!).</p>
<p>
  <h5>The spirit of Rang De</h5>
  The name Rang De was decided after a lot of thought. It goes back to the patriotic struggle for Independence. We believe that a similar movement with the same kind of urgency is required to address poverty in India. The words Rang De also denote colour
  and exuberance and that is the significance we want our efforts to have for the people we reach out to.</p>
<p>The idea of Rang De was sown in the year 2006 - the same year when Mr. Yunus was awarded the Nobel Prize for his work with Grameen Bank. The motivation for starting Rang De was the belief that the peer to peer lending model could be leveraged to lower
  the cost of microcredit and reach out to under-served communities. RangDe.Org went live on January 26th 2008 (16:48 hrs to be precise!).</p>
<p>
  <h5>The spirit of Rang De</h5>
  The name Rang De was decided after a lot of thought. It goes back to the patriotic struggle for Independence. We believe that a similar movement with the same kind of urgency is required to address poverty in India. The words Rang De also denote colour
  and exuberance and that is the significance we want our efforts to have for the people we reach out to.</p>
<p>The idea of Rang De was sown in the year 2006 - the same year when Mr. Yunus was awarded the Nobel Prize for his work with Grameen Bank. The motivation for starting Rang De was the belief that the peer to peer lending model could be leveraged to lower
  the cost of microcredit and reach out to under-served communities. RangDe.Org went live on January 26th 2008 (16:48 hrs to be precise!).</p>
<p>
  <h5>The spirit of Rang De</h5>
  The name Rang De was decided after a lot of thought. It goes back to the patriotic struggle for Independence. We believe that a similar movement with the same kind of urgency is required to address poverty in India. The words Rang De also denote colour
  and exuberance and that is the significance we want our efforts to have for the people we reach out to.</p>
<p>The idea of Rang De was sown in the year 2006 - the same year when Mr. Yunus was awarded the Nobel Prize for his work with Grameen Bank. The motivation for starting Rang De was the belief that the peer to peer lending model could be leveraged to lower
  the cost of microcredit and reach out to under-served communities. RangDe.Org went live on January 26th 2008 (16:48 hrs to be precise!).</p>
<p>
  <h5>The spirit of Rang De</h5>
  The name Rang De was decided after a lot of thought. It goes back to the patriotic struggle for Independence. We believe that a similar movement with the same kind of urgency is required to address poverty in India. The words Rang De also denote colour
  and exuberance and that is the significance we want our efforts to have for the people we reach out to.</p>

回答by Jose Ospina

This is not your question, but in many cases it might just be simpler to add padding-rightto your elements container, and not to the scrollbar.

这不是您的问题，但在许多情况下，将其添加padding-right到元素容器而不是滚动条可能更简单。