[CB]Mинимальный стиль для полосы прокрутки (скролбара)

bunda1 · №1

Mинимальный стиль для полосы прокрутки (скролбара)( Firefox 3.6 + )
Автор: bunda1
Версия: от 11.05.2013.
Описание: Kод минимизирует полосу прокрутки (скролбар) на страницах и везде.

скриншот

Использование: положите код в любую Custom Buttons кнопку, в инициализацию + рестарт. Не обязательно создавать новую CB кнопку, можно использовать уже существующую.

Выделить код

Код:

// Mинимальный стиль для полосы прокрутки (скролбара) от 11.05.2013. ...............................
var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

var uri = makeURI('data:text/css,'+ encodeURIComponent('\n\
scrollbar thumb { -moz-appearance: none !important; background-color: green ! important; }\n\
scrollbar:not(:hover) thumb { opacity: .5 !important; }\n\
scrollbar[orient="vertical"], scrollbar[orient="horizontal"] { min-width: 8px !important; }\n\
textarea:not([anonid="input"]) [orient="vertical"], textarea:not([anonid="input"]) scrollbar[orient="horizontal"] { min-width: 16px !important; }\n\
scrollbar { -moz-appearance: none!important; background: transparent !important; }\n\
scrollbar scrollbarbutton { visibility: collapse !important; }\n\
textarea:not([anonid="input"]) scrollbar scrollbarbutton { visibility: visible !important; }\n\
scrollbar scrollcorner, scrollcorner { background: transparent !important; }\n\
'))

if ( sss.sheetRegistered(uri, sss.AGENT_SHEET) ) { sss.unregisterSheet(uri, sss.AGENT_SHEET) };
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

Отредактировано bunda1 (11-05-2013 23:21:46)

middlemouse.paste · №2

А если добавить к параметрам 6й строки border-radius: 4px !important; то ползунок будет с закругленными краями.
У меня вопрос, как установить минимальную величину ползунока по вертикали, чтобы на очень длинных страницах он не сжимался вплоть до нуля?
Можно ли сделать чтобы просматриваемая страница занимала все горизонтальное пространство экрана, а боковой скролбар тоже отображался, но висел поверх края страницы, а не сбоку от нее в отдельной области и не сжимал страницу на несколько пикселей? Надо учесть чтобы щелчки мыши по области сролбара обрабатывал сам скролбар а не страница, в том числе чтобы настройка middlemouse.scrollbarPosition = true продолжала работать при такой "модификации".

bunda1 · №3

middlemouse.paste
scrollbar thumb { -moz-appearance: none !important; background-color: green ! important; min-height: 18px !important;}\
Подбери величину min-height: для себя.

Нащёт скролбар поверх страницы я не знаю.

Kamui · №4

А при наведении на скроллбар, ширина (для вертикального) или высота (для горизонтального) ползунка увеличивается?

bunda1 · №5

Kamui
У меня при наведении на скроллбар, ширина (для вертикального) или высота (для горизонтального) ползунка не увеличивается.

Kamui · №6

bunda1 пишет

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

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

ElFrio · №7

Перестаёт работать возможность изменения размера поля ввода. Не подскажете, как исправить?

middlemouse.paste · №8

Благодаря jetpack Floaty Scrollbar найдено решение как сделать скролбар поверх страницы

Выделить код

Код:

// Mинимальный стиль для полосы прокрутки (скролбара)
var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);
var uri = makeURI('data:text/css,'+ encodeURIComponent('\n\
scrollbar thumb { -moz-appearance: none !important; background-color: green ! important; border-radius: 4px !important;}\n\
scrollbar:not(:hover) thumb { opacity: .5 !important; }\n\
scrollbar[orient="vertical"]   { -moz-margin-start: -8px !important; min-width: 8px !important;  max-width: 8px !important;}\n\
scrollbar[orient="horizontal"] { -moz-margin-start: -8px !important; min-height: 8px !important; max-height: 8px !important; margin-top: -8px !important;}\n\
textarea:not([anonid="input"]) [orient="vertical"], textarea:not([anonid="input"]) scrollbar[orient="horizontal"] { min-width: 16px !important; }\n\
scrollbar { -moz-appearance: none!important; background: transparent !important; position: relative !important;}\n\
scrollbar scrollbarbutton { visibility: collapse !important; }\n\
textarea:not([anonid="input"]) scrollbar scrollbarbutton { visibility: visible !important; }\n\
scrollbar scrollcorner, scrollcorner { background: transparent !important; }\n\
'))
if ( sss.sheetRegistered(uri, sss.AGENT_SHEET) ) { sss.unregisterSheet(uri, sss.AGENT_SHEET) };
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

Прошу протестировать желающих.

bunda1 · №9

middlemouse.paste

Полезный код но в текстовых полях вода не красиво работает:

Отредактировано bunda1 (09-06-2013 12:52:08)

vom · №10

bunda1
Есть одна проблема, не работает с настройкой layout.scrollbar.side;3, которая помещает скроллбар слева. Возможно ли что-то сделать? А кнопка, как всегда, must have, очень давно искал способ, как привести скроллбар в порядок. Спасибо большое!

middlemouse.paste · №11

bunda1
Вариант который использую я

Выделить код

Код:

var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"]
                    .getService(Components.interfaces.nsIStyleSheetService);
var uri = makeURI('data:text/css,'+ encodeURIComponent('\n\
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);\n\
scrollbar thumb { -moz-appearance: none !important; background-color: yellow !important; border-radius: 4px !important; opacity: 0.7 !important;}\n\
scrollbar:not(:hover) thumb { opacity: 0.3 !important; }\n\
scrollbar[orient="vertical"]   { -moz-margin-start: -8px !important; min-width: 8px !important;  max-width: 8px !important;}\n\
scrollbar[orient="horizontal"] { -moz-margin-start: -8px !important;   margin-top: -8px !important; min-height: 8px !important; max-height: 8px !important;}\n\
scrollbar scrollbarbutton { visibility: collapse !important; }\n\
scrollbar { -moz-appearance: none!important; background: transparent !important; position: relative !important; }\n\
scrollbar scrollcorner, scrollcorner { background: transparent !important; }\n\
'));
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

Проблема видимо в строке

Выделить код

Код:

textarea:not([anonid="input"]) [orient="vertical"], textarea:not([anonid="input"]) scrollbar[orient="horizontal"] { min-width: 16px !important; }\n\

bunda1 · №12

vom пишет

bunda1
Есть одна проблема, не работает с настройкой layout.scrollbar.side;3, которая помещает скроллбар слева. Возможно ли что-то сделать? А кнопка, как всегда, must have, очень давно искал способ, как привести скроллбар в порядок. Спасибо большое!

В чём проблема, у меня вроде как работает с настройкой layout.scrollbar.side;3

bunda1 · №13

middlemouse.paste пишет

bunda1
Вариант который использую я

Кстати твой вариант работает без проблем, спасибо.

vom · №14

bunda1 пишет

В чём проблема, у меня вроде как работает с настройкой layout.scrollbar.side;3

Вертикальный скроллбар вообще исчезает, хотя горизонтальный остается. Проверял на чистых профилях 21 и 22, может быть они по разному обрабатываются.

bunda1 · №15

vom пишет

bunda1 пишет
В чём проблема, у меня вроде как работает с настройкой layout.scrollbar.side;3
Вертикальный скроллбар вообще исчезает, хотя горизонтальный остается. Проверял на чистых профилях 21 и 22, может быть они по разному обрабатываются.

Не знаю в чём дело может попробуй 09-06-2013 21:58:17

Полезная информация

№126-11-2012 00:06:35