прозрачный фон на полосе прокрутки

Question

У меня есть div с линиями для разделения разных разделов с полосой прокрутки по оси x. У меня есть функция, при которой, когда пользователь наводит курсор на div, отображается ползунок полосы прокрутки. Однако дорожка полосы прокрутки оставляет белую линию в нижней части div. Я попробовал background: none; и установил для фона прозрачное изображение. Есть ли способ исправить это?

песочница кода: https://codesandbox.io/s/festive-hermann-xejx0?file= / src / App. js

Answer 1

div::-webkit-scrollbar{ background: 0}
div:hover::-webkit-scrollbar{ background: #aaa; height: 25px }
div:hover::-webkit-scrollbar-thumb{ background: #fff; border-radius: 10px}

К сожалению, css несовместим, и «0» нельзя заменить на «none».

Это -webkit- Он имеет только частичную поддержку , для chrome и Opera работает, для IF и FF (которые я не могу сейчас протестировать) вы можете добавить без префикса

div::scrollbar{ background: 0}

В конце концов, это будет выглядеть по-разному на разных устройствах - как всегда с ограничениями служба поддержки. Вы можете сделать все возможное для поддерживаемых браузеров, но один всегда выходит с белой полосой (что не самая уродливая вещь в мире).

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

Если вы очень уверены, что всегда какие-то CSS трюки вроде - добавить занавес с position: relative; bottom: 10px или, может быть, очень забавную тень коробки, но я думаю, что это не очень хорошая практика, а скорее головная боль ... Может - этот темный фильтр должен быть темнее снизу?

Answer 2

Это не работает, потому что в div не может быть обоих

 overflow-y: visible;
 overflow-x: scroll;

overflow-y изменяется на auto. Поэтому вертикальные линии не могут выходить за пределы div по вертикали. Также не рекомендуется использовать :: - webkit-scrollbar, поскольку у него плохая совместимость. Поскольку вы используете реакцию, вам следует вместо этого использовать полосу выполнения в компоненте прокрутки.