是否有移动定制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;
}

在那里我已经包括了以上内容的地方是2em的边界半径定制的div元素。现在，自定义滚动条看上去有些凸出，因为你可以在下面的图片中看到：

我怎样才能发送<div>背后的滚动条，使多余的滚动条可以去除？

P.S：在<div>的圆角半径应保持。

Answer 1

你可以把一个小格的外层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>