有没有一种方法可以将自定义HTML滚动条移动到div后面

Question

我的博客帖子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>后面，以便删除多余的滚动条？

PS ：应保持<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>