Как сделать scrollbar полупрозрачным и не занимающим место?

Ссылка скопирована
CSS Google Chrome macOS
1 ответ

Уже не в первый раз сталкиваюсь с тем что во время верстки я вероятно что то упускаю из-за чего у меня и у клиента на MacOS в Chrome скролбар занимает место, хотя когда на всех остальных сайтах он полупрозрачный и идет поверх страницы. Ничего не нашел в сети на этот счет, overflow: overlay - не помог. Что я упустил?

Дополнительно:

В настройках системы можно скроллбар на маке отображать поверх или в обычной полосе прокрутки.

  • Полупрозрачный scrollbar - одно из гадких изобретений, которое я ненавижу от всего сердца. Хуже только scrollbar, полностью скрытый и появляющийся при наведении.
    Очень вас прошу, не будьте как те #$%^& дизайнеры, это портит UX.
  • Александр, дело в том что на всех остальных сайтах с того же мака полоса прокрутки поверх, а именно на тех сайтах что я делаю в обычном режиме. иногда у клиентов запрос на то что бы было поверх, а я никак не могу найти причину почему у меня выходит так.
  • hint000, тут дело не в том что мне так нравится, просто бывает у клиента на это запрос, а я обязан знать как этот задачу выполнить.
  • Нету мака чтобы проверить, но, догадываюсь, что это из-за кастомизации скролбара на странице через ::-webkit-scrollbar
  • Илья Матвийчук, я совершенно никак его не кастомизировал

    • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Кирилл JS Ответ

    Для того чтобы сделать scrollbar полупрозрачным и не занимающим место, вы можете использовать следующий CSS код:

    /* Стили для scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
 
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.5); /* полупрозрачный цвет фона */
}
 
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5); /* полупрозрачный цвет ползунка */
}

    /* Стили для scrollbar */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.5); /* полупрозрачный цвет фона */ } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.5); /* полупрозрачный цвет ползунка */ }

    В данном коде мы используем псевдоэлементы для scrollbar, чтобы задать им стили. Свойство `width` задает ширину scrollbar, а свойства `background` устанавливают цвет фона и ползунка scrollbar с прозрачностью.

    Помимо этого, вы можете дополнительно настроить другие параметры scrollbar, такие как `border-radius` для закругления углов, `border` для добавления границ scrollbar и другие.

    Не забудьте, что данное решение работает только в браузерах на основе WebKit (например, Google Chrome, Safari). Для других браузеров могут потребоваться дополнительные стили или хаки.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Figma Баг с переносом слов в Figma? 1 ответ