Свойства полосы прокрутки в веб-наборе с тегом <ul> - PullRequest
Новая
       5

Свойства полосы прокрутки в веб-наборе с тегом <ul>

0 голосов
/ 18 февраля 2020

В моем коде у меня есть неупорядоченный список внутри div, и в то же время я добавил к нему полосу прокрутки. Я хочу использовать свойства webkit с этим ul. Я попробовал как ниже. 

.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. Но это не работает для меня. Я использовал правильный способ или любой другой способ использовать это?

Ответы [ 2 ]

0 голосов
/ 18 февраля 2020

Можете ли вы проверить с приведенным ниже кодом, надеюсь, что он будет работать для вас, но убедитесь, что он будет работать только для браузеров 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>
0 голосов
/ 18 февраля 2020

Используйте нижнюю css для полосы прокрутки в списке списка: - 

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

Для вашего удобства см. Ссылку js fiddle: https://jsfiddle.net/harshsetia/z629uxwf/3/

...