Блог

Главная - Вопросы по программированию - применение тени к полосе прокрутки thumb

применение тени к полосе прокрутки thumb

#html #css

#HTML #css

Вопрос:

Я создал эту полосу прокрутки:

введите описание изображения здесь

Как вы можете видеть, у thumb есть box-shadow . но дело в том, что тень не перемещается вместе с большим пальцем. это работает следующим образом введите описание изображения здесь

это всего лишь очень элементарная деталь, которую я добавляю, чтобы избавиться от этой ошибки, поэтому она дает мне.

это чертовски глупая ошибка, которая не исчезает

 .pr-20{
  padding-right: 20px;
}

.w-217 {
  width: 217px;
}

.h-220 {
  height: 220px;
}

.text-right{
  text-align: right;
}
.overflow-y-show {
  overflow-y: scroll;
  direction: ltr !important;
}

.custom-scroll::-webkit-scrollbar {
  width: 9px;
}


/* the thin blue line */

.custom-scroll::-webkit-scrollbar-track {
  background: linear-gradient( 90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 
  45%, #48eefc 45%, #48eefc 55%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 
  100%);
}

.custom-scroll::-webkit-scrollbar-thumb {
  background-color: #48eefc;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 10px #48eefc;
  -moz-box-shadow: 0px 0px 10px #48eefc;
  box-shadow: 0px 0px 10px #48eefc;
}  
 <div class="overflow-y-show custom-scroll text-right pr-20 w-217 h-220">
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
</div>

Комментарии:

1. Предполагается ли в вашем фрагменте воспроизвести проблему? Потому что это выглядит нормально, когда я его запускаю

2. @Novy ну … это код, который я написал, и изображения таковы, как он выглядит. итак, когда вы запускаете ее, тень не глючит?? можете ли вы предоставить скриншоты?

3. когда я запускаю его, у меня нет тени, только серая полоса прокрутки. Кстати, я пробовал chrome, safary, brave и firefox на mac os

4. @Novy отредактировал код

Ответ №1:

Это нормально для вас?

 .overflow-y-show {
  overflow-y: scroll;
  direction: ltr !important;
}

::-webkit-scrollbar {
  width: 9px;
}


/* the thin blue line */

::-webkit-scrollbar-track {
  background: linear-gradient( 90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 45%, #48eefc 45%, #48eefc 55%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
}

::-webkit-scrollbar-thumb {
  background-color: #48eefc;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 10px #48eefc;
  -moz-box-shadow: 0px 0px 10px #48eefc;
  box-shadow: 0px 0px 10px #48eefc;
}
/* for firefox scrollbar has only two properties scrollbar-color scrollbar-width*/
html {
 scrollbar-color: #48eefc #8ea5b5;
 scrollbar-width: thin;
}  
 <div className="overflow-y-show custom-scroll text-right pr-20 w-217 h-217">
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
</div>

Комментарии:

1. У вас было то же самое в другом браузере? какой браузер вы используете @Mr- A?

2. я использую chrome, firefox игнорирует стили и показывает серую полосу прокрутки по умолчанию

3. Ах, хорошо, хорошо, если вы посмотрите на спецификацию для firefox, у полосы прокрутки есть только два свойства: полоса прокрутки -цвет, полоса прокрутки-ширина. вы можете проверить это сейчас.

4. некоторые объяснения могут быть полезны, теперь нужно перепроектировать логику, просмотрев код

5. Я могу понять. Но я подумал, что, глядя на код, вы являетесь инженером-программистом @Vega4, поэтому «RTFS»