как сделать собственную полосу прокрутки с помощью CSS

Question

просто интересно, можно ли изменить стиль полосы прокрутки с помощью css (не главное окно)

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

есть идеи?

спасибо

Answer 1

См. Принятый ответ для хорошего технического решения.

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

Адаптируйте свой веб-сайт, чтобы он хорошо смотрелся в браузере, не настраивайте браузер, чтобы он хорошо выглядел на вашем сайте!

Answer 2

Некоторые версии Internet Explorer позволяли стилизовать полосы прокрутки с помощью CSS, но это не было частью стандарта CSS и, вероятно, в наши дни не так.

Для кросс-браузерной совместимости вам нужно будет имитировать полосы прокрутки с помощью JavaScript; К счастью, для этого есть библиотеки, такие как плагин JQuery jScrollPane .

Answer 3

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

Если есть какой-либо способ показать весь текст и / или оставить прокрутку на главной полосе прокрутки браузера, сделайте это:)

Answer 4

Если вы хотите -edit- визуальный характер полосы прокрутки ... это не может быть сделано с помощью CSS. Насколько я знаю, JavaScript может сделать это.

Если вы просто хотите, чтобы полоса прокрутки не появлялась, вы можете установить

div {
    overflow: hidden;
}

, чтобы полоса прокрутки не появлялась. Вы потеряете доступ к контенту.