Как я могу переместить полосу прокрутки веб-браузеров и стилизовать ее (CSS)?

Question

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

Изображение: альтернативный текст http://i45.tinypic.com/eqti7d.jpg

Answer 1

Вы можете перемещать полосы прокрутки с помощью jquery и некоторого JavaScript. В этом примере я использую анимацию jquery для постепенной прокрутки вниз:

//move the scroll 800 pixels down in 200 milliseconds
$('html,body').animate({scrollTop: 800}, 200, "swing");

Чтобы стилизовать полосы прокрутки, вы можете использовать эту CSS:

body {
  scrollbar-face-color: #FDCF66;
  scrollbar-highlight-color: #FDCF66;
  scrollbar-3dlight-color: #FDCF66;
  scrollbar-darkshadow-color: #FDCF66;
  scrollbar-shadow-color: #FDCF66;
  scrollbar-arrow-color: #FDCF66;
  scrollbar-track-color: #FDCF66;
}

Вот что означают эти цвета ( источник ):

легенда http://www.programacionweb.net/images/articulos/scrollgraph.gif

Однако я не уверен, что это стандартный CSS, поэтому некоторые навигаторы могут его не поддерживать.

Answer 2

Ну, вы можете поместить содержимое в div, а затем ограничить высоту div, чтобы заставить браузер разместить там полосу прокрутки (для прокрутки внутри div). Таким образом, страница помещается в окне браузера, но у div, содержащего содержимое, есть своя собственная полоса прокрутки.

Например, вот стиль из собственного списка связанных вопросов Stack Overflow, когда вы задаете вопрос:

"height:150px; overflow-y:scroll; overflow-x:clip;"

Что касается стиля, я не уверен, что это возможно с этим обходным путем.

Так что, в принципе, у вас будет это на вашей странице

––––––––––––––––––––
|      Header      |
|------------------|
|                  |
|        Div       |
|   with limited   |
|      height      |
|                  |
––––––––––––––––––––

Обратите внимание, что этот метод заставит ваш заголовок появляться постоянно (если только заголовок + div не больше размера окна, что приведет к двум полосам прокрутки), поскольку заголовок фактически не прокручивается мимо.

Answer 3

Нет, вы не сможете стилизовать панель, поскольку она принадлежит браузеру, а не самому сайту.

Answer 4

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

Answer 5

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