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

скрытый текст

Выделить код

Код:

/*Initialization Code*/// 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: 1px !important;}\n\
scrollbar:not(:hover) thumb {opacity: .5 !important; }\n\
scrollbar[orient="vertical"]   { -moz-margin-start: -9px !important; min-width: 9px !important;  max-width: 9px !important;}\n\
scrollbar[orient="horizontal"] { -moz-margin-start: -9px !important; min-height: 9px !important; max-height: 9px !important; margin-top: -9px !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);

Упрощу задачу :)
как данный фрагмент кода из стиля, срастить с кодом кнопки(или наоборот)? Вместе получается почти то что надо..)

скрытый текст

Выделить код

Код:

scrollbar[orient="horizontal"] {
    margin-top: -10px;
    max-height: 10px;
    min-height: 10px;
    padding:2px 0 !important;
}
scrollbar[orient="vertical"] {
    -moz-margin-start: -20px;
  max-width: 10px !important;
    min-width: 10px !important;
    padding:0 2px !important;
}
scrollbar:hover {
    padding:0 !important;
}

:rolleyes:

Выделить код

Код:

scrollbar { 
    -moz-appearance: none!important;
    background: transparent !important;
    position: relative !important;
}
scrollbar[orient="horizontal"] {
    -moz-margin-start: -9px !important; 
    margin-top: -10px;
    max-height: 10px;
    min-height: 10px;
    padding:2px 0 !important;
}
scrollbar[orient="vertical"] {
    -moz-margin-start: -20px;
    max-width: 10px !important;
    min-width: 10px !important;
    padding:0 2px !important;
}
scrollbar:hover {
    padding:0 !important;
}
scrollbar thumb { 
    -moz-appearance: none !important; 
    background-color: green ! important;
    border-radius: 1px !important;
}
scrollbar:not(:hover) thumb { 
    opacity: .5 !important; 
}
scrollbar scrollbarbutton {
    visibility: collapse !important;
}
scrollbar scrollcorner, scrollcorner { 
    background: transparent !important;
}
textarea:not([anonid="input"]) [orient="vertical"],
textarea:not([anonid="input"]) scrollbar[orient="horizontal"] { 
    min-width: 16px !important;
}
textarea:not([anonid="input"]) scrollbar scrollbarbutton { 
   visibility: visible !important;
}

Не работает.

21-09-2015 20:42:10
уточню - в моей "сборке" полоска прокрутки над страницей. В этом - страница съезжает на ширину прокрутки.

amid525 пишет

уточню - в моей "сборке" полоска прокрутки над страницей. В этом - страница съезжает на ширину прокрутки.

А ты на чём этот код запускаешь?

21-09-2015 20:55:36
вот только css от сюда Сегодня 17:36:57

Выделить код

Код:

scrollbar thumb { -moz-appearance: none !important; background-color: green ! important; border-radius: 1px !important;}
scrollbar:not(:hover) thumb {opacity: .5 !important; }
scrollbar[orient="vertical"]   { -moz-margin-start: -9px !important; min-width: 9px !important;  max-width: 9px !important;}
scrollbar[orient="horizontal"] { -moz-margin-start: -9px !important; min-height: 9px !important; max-height: 9px !important; margin-top: -9px !important;}
textarea:not([anonid="input"]) [orient="vertical"], textarea:not([anonid="input"]) scrollbar[orient="horizontal"] { min-width: 16px !important; }
scrollbar { -moz-appearance: none!important; background: transparent !important; position: relative !important;}
scrollbar scrollbarbutton { visibility: collapse !important; }
textarea:not([anonid="input"]) scrollbar scrollbarbutton { visibility: visible !important; }
scrollbar scrollcorner, scrollcorner { background: transparent !important; }

Удали то что дублируется и все дела.

в Stilish запускал. Свой стиль отключал, а кнопку удалял с перезагрузкой..
вот что получил, и как надо

скрытый текст
sshot1png_6458918_18871722.png
sshot2png_1987933_18871730.png

Идей больше нет как сделать? :rolleyes: Может кнопку поправить, что бы полоска Уже была, когда не наведена

amid525 пишет

Идей больше нет как сделать? :rolleyes: Может кнопку поправить, что бы полоска уже была, когда не наведена

Может удали background: transparent !important;

Удалял, ни чего не меняется. Прокрутка не на странице, а в стороне ее.. Как на первом скрине.

Удали position: relative !important;

ни каких изменений

Мистика!

Только кнопка, пока справляется наложением прокрутки НА страницу!:) Вот  чуть подправить ее, что бы прокрутка ширину меняла. Не реально?:rolleyes:

21-09-2015 22:54:40
bunda1, все таки, моя тема  FT DeepDark не давала вашему стилю работать.:( На дефолтной работает. Странно, почему кнопка справляется? :rolleyes:

amid525 пишет

Только кнопка, пока справляется наложением прокрутки НА страницу!:) Вот  чуть подправить ее, что бы прокрутка ширину меняла. Не реально?:rolleyes:

:/

Выделить код

Код:

// Mинимальный стиль для полосы прокрутки (скролбара) ..............
var uri = makeURI('data:text/css,'+ encodeURIComponent('\
scrollbar {\
    -moz-appearance: none!important;\
    background: transparent !important;\
    position: relative !important;\
}\
scrollbar[orient="horizontal"] {\
    -moz-margin-start: -9px !important;\
    margin-top: -10px;\
    max-height: 10px;\
    min-height: 10px;\
    padding:2px 0 !important;\
}\
scrollbar[orient="vertical"] {\
    -moz-margin-start: -20px;\
    max-width: 10px !important;\
    min-width: 10px !important;\
    padding:0 2px !important;\
}\
scrollbar:hover {\
    padding:0 !important;\
}\
scrollbar thumb {\
    -moz-appearance: none !important;\
    background-color: green ! important;\
    border-radius: 1px !important;\
}\
scrollbar:not(:hover) thumb {\
    opacity: .5 !important;\
}\
scrollbar scrollbarbutton {\
    visibility: collapse !important;\
}\
scrollbar scrollcorner, scrollcorner {\
    background: transparent !important;\
}\
textarea:not([anonid="input"]) [orient="vertical"],\
textarea:not([anonid="input"]) scrollbar[orient="horizontal"] {\
    min-width: 16px !important;\
}\
textarea:not([anonid="input"]) scrollbar scrollbarbutton {\
   visibility: visible !important;\
}\
'));

const sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService);
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET); 
addDestructor(function() { sss.unregisterSheet(uri, sss.AGENT_SHEET) });

bunda1
все то-же. На страницах сайтов - скрол вне страницы.
В окне дополнений, редактирований css - скрол на них.:/

Ну а эсли так:

Выделить код

Код:

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

bunda1, теперь скролл на странице. Но, результат такой - как на моем коде в начале темы.:)  Полоска  не меняет ширину при наведении..  Что появилось - на пару мм при наведении изменяется по длине\положению..) Не должно так.

Ну тогда не знаю.

Спасибо за помощь, да и черт с ним. :) Буду тогда пользоваться своей кнопкой и фрагментом от  стиля. ok.gif