有没有办法将自定义 HTML 滚动条移动到 div 后面

Question

我的博客上有一些代码片段 post here.

我用下面的代码定义了自定义滚动条：

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

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #0ef; 
  border-radius: 10px;
}

我包含代码段的地方是一个自定义 div 元素，边框半径为 2em。现在自定义滚动条看起来有些凸出，如下图所示：

如何将滚动条发送到 <div> 后面，以便删除多余的滚动条？

P.S.: <div>的边框半径应该保持不变。

Answer 1

您可以在外部 div 内放置一个小的 div 并使其成为滚动条的容器，以防止这些滚动条凸出，例如。 fiddle喜欢

<div class="outer">
  <div class="inner">
   ..content
  </div>
</div>

.outer{
  max-height:200px;
  width:250px;
  border-radius:10px; 
  padding:0px 0px;
  background:#ccc;
}
.inner{
  white-space: nowrap;
  width:250px;
  max-height:200px;
  overflow-x:scroll;
  overflow-y:hidden;
  border-radius:8px;
}
/* width */
::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #0ef; 
  border-radius: 10px;
}

<div class="outer">
  <div class="inner">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>
</div>

有没有办法将自定义 HTML 滚动条移动到 div 后面

Is there a way to move custom HTML scrollbar behind a div

html

css

scrollbar

code-snippets