如何为 CSS webkit 滚动条添加边距？ [关闭]
Posted
技术标签:
【中文标题】如何为 CSS webkit 滚动条添加边距？ [关闭]【英文标题】：How do I add a margin to a CSS webkit scrollbar? [closed] 【发布时间】：2015-07-04 04:41:19 【问题描述】：这是带有当前 webkit 滚动条的我的网站：http://willwhitehead.com
我想在滚动条和屏幕右边缘之间创建一个间隙。
我如何做到这一点？
提前致谢，
会
【问题讨论】：
这能回答你的问题吗？ CSS vertical scrollbar padding left/right in UL possible? 【参考方案1】：还有另一种解决方案可能很容易适用于每个人的项目。 如果您使用透明边框作为边距，并使用带有 inset 的 box-shadow 设置其颜色，您会得到您希望的结果。
例如：
::-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;
这可能是一个丑陋的滚动条，但它可以作为我的意思的一个例子。
但是，在 Chrome 中，透明属性不起作用，因此您必须手动插入适合背景的颜色，最好是背景颜色。
【讨论】：
太棒了！谢谢。 我试过这个解决方案，但右边没有边距... 确保您没有设置背景颜色，否则这将不起作用。背景覆盖了插入边框。【参考方案2】：这是一个可怕的 hack，但似乎有效。使用::-webkit-scrollbar 选择器，给条形图一个固定的 x 像素。然后将 left 属性设置为某个 -px 值。
::-webkit-scrollbar
width: 10px; left:-100px;
或者，您可以执行以下操作：
给::-webkit-scrollbar 一个固定宽度，比如30px，然后将::-webkit-scrollbar-thumb 的边框设置为您希望滚动条远离屏幕右侧的填充。并设置边框的背景以匹配背景颜色。
这会产生滚动条漂浮在窗口右侧的错觉，但实际上并非如此。您可以在下面的小提琴中看到这一点。
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>但是，最好的办法可能是将所有内容包装在一个容器 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>【讨论】：
感谢您的帮助！【参考方案3】：::-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 示例 - https://codesandbox.io/s/5vk9246qyk
当时 93.02% 的浏览器都支持 webkit-scrollbar 或写作https://www.caniuse.com/#search=webkit-scrollbar
【讨论】：
【参考方案4】：另一种解决方案是使用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>【讨论】：
【参考方案5】：这不是您的问题，但在许多情况下，将 padding-right 添加到元素容器而不是滚动条可能会更简单。
【讨论】：
以上是关于如何为 CSS webkit 滚动条添加边距？ [关闭]的主要内容，如果未能解决你的问题，请参考以下文章