带有 <ul> 标签的滚动条 webkit 属性

Question

在我的代码中，div 中有无序列表，同时我向其中添加了滚动条。我想在这个 ul 中使用 webkit 属性。我试过如下。

.list > ul ::-webkit-scrollbar {
 width: 12px; 
 background-color: #e4e7eb;
 }

.list > ul::-webkit-scrollbar-thumb {
  outline: 1px solid slategrey;
  border-radius: 14px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #ffffff;
}

.list > ul ::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 14px;
  background-color: #e4e7eb;
}

"list" 是 div class 的名字。但这对我不起作用。我是否使用了正确的方式或任何其他方式来使用它？

Answer 1

在列表 div 中使用下面的 css 作为滚动条：-

.list ul {
max-height: 100px;
height: auto;
overflow: auto;
}

为方便起见，请参阅 js fiddle link:https://jsfiddle.net/harshsetia/z629uxwf/3/

Answer 2

能否请您检查以下代码，希望它对您有用，但请确保它仅适用于 Chrome 和 Safari 浏览器。

.list > ul {
  height: 150px;
  overflow-x: auto;
}
.list > ul::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.list > ul::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
.list > ul::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
.list > ul::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

<div class="list">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>

带有 <ul> 标签的滚动条 webkit 属性

Scrollbar webkit properties with <ul> tag

html

css

scrollbar