Переполнение полосы прокрутки

Question

Я новичок в HTML и CSS и пытаюсь создать веб-сайт, где большая часть текста будет отображаться в полях на экране.

Каждая коробка будет окрашена по-разному и будет иметь больше текста, чем видно непосредственно

Мой вопрос

Можно ли сделать цвет фона секции прокрутки, т.е. бит между двумя стрелками, совпадает с существующим цветом фона?

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

Наконец, могу ли я избавиться от горизонтальной полосы прокрутки, так как она не требуется? В настоящее время он заставляет мою коробку иметь белую полосу вдоль дна

Answer 1

Существует несколько вариантов изменения стиля полос прокрутки на веб-сайтах:

1. Через CSS : Это не работает надежно: например, это работает только в IE, а не в Firefox. Так что я бы избежал этого.

2. Через JavaScript: Я предлагаю: Скройте полосы прокрутки браузера и создайте свою собственную полосу прокрутки, используя JavaScript и некоторые изображения стрелок, чтобы вы получили полный контроль над стилем. Например, вы можете использовать JQuery и JScrollPane ( demo ). Согласно документации это работает во всех современных браузерах (IE, Firefox ...). Если пользователь отключит поддержку javascript, он все равно будет работать, но полосы прокрутки будут отображаться без стилей.

Answer 2

Только Internet Explorer и Opera в режиме причуд поддерживают цветную полосу прокрутки браузера, поэтому вам нужно попробовать решение javascript.

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

Для горизонтальной полосы прокрутки вы можете попробовать overflow-x: hidden; overflow-y: scroll. Это предназначено, чтобы остановить горизонтальную прокрутку, но разрешить вертикальную прокрутку. Я считаю, что это CSS3, поэтому вряд ли будет работать во всех браузерах.

Обновление: Только что увидел, что должно соответствовать вашим потребностям: http://www.leigeber.com/2009/09/javascript-scrollable-div/