时间戳

首页 > 解决方案 > 为什么我的自定义滚动条框阴影样式不影响正文滚动条？

html - 为什么我的自定义滚动条框阴影样式不影响正文滚动条？

问题描述

我有一个简单的滚动条样式表，可以改变滚动条在基于 Webkit 的浏览器中的外观。这是代码：

::-webkit-scrollbar {
  width: 14px;
  height: 14px;
  background-color: white;
  -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
  box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-button {
  background-color: rgba(0, 0, 0, 0.25);
}
::-webkit-scrollbar-thumb {
  height: 50px;
  background-color: rgba(0, 0, 0, 0.25);
  border: 4px solid white;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
}
::-webkit-resizer {
  background-color: rgba(0, 0, 0, 0.25);
}
<div style="height: 5000px;">
  <br /><br />
  <div style="margin: auto; width: 100px; height: 500px; overflow-y: scroll; border: 1px solid black;">
    <div style="height: 1000px; padding: 24px;">
      <div>Some content</div>
    </div>
  </div>
</div>

如您所见，黑框内的滚动条左侧有框阴影。但是，身体上的那个没有，即使它是应用于两者的相同样式。为什么会这样？

标签： htmlcss

解决方案

只需使用滚动条阴影中的插入选项box-shadow

::-webkit-scrollbar {
  width: 14px;
  height: 14px;
  background-color: white;
   -webkit-box-shadow: inset 0 0 6px black
}
::-webkit-scrollbar-button {
  background-color: rgba(0, 0, 0, 0.25);
}
::-webkit-scrollbar-thumb {
  height: 50px;
  background-color: rgba(0, 0, 0, 0.25);
  border: 4px solid white;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
}
::-webkit-resizer {
  background-color: rgba(0, 0, 0, 0.25);
}
html{
  background-color:white;
  height:100%;
}
<div style="height: 5000px;">
  <br /><br />
  <div style="margin: auto; width: 100px; height: 500px; overflow-y: scroll; border: 1px solid black;">
    <div style="height: 1000px; padding: 24px;">
      <div>Some content</div>
    </div>
  </div>
</div>

推荐阅读