代码之家 › 专栏 › 技术社区 › Gourav

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

code-snippets scrollbar css html

Gourav · 技术社区 · 7 年前

我的博客上有一些代码片段 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> 以便删除额外的滚动条?

附笔。 :边界的边界半径 <部门> 应该保持。

1 回复 | 直到 7 年前

weegee Chinnon Santos 7 年前

你可以把一个小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>