Скроллбары

Скроллбар (Скролл, scrollbar ) – это горизонтальная или вертикальная полоса прокрутки, элемент управления интерфейса, формы, веб-страницы и т д. Выполнен в форме полосы с «ползунком», при помощи которого можно быстро перемещаться к нужной информации, части картинки и т. д., открывая ту часть интерфейса или веб-страницы, которая не поместилась в видимой части экрана.

1. Простейший скроллбар с вертикальной прокруткой.

Скопируйте код, который вы видите в рамочке и вставьте в сообщение блога в редакторе HTML.  Вместо слов ВАШ ТЕКСТ вставьте свой текст, отрегулируйте ширину (width) и высоту (height) по своему желанию. Если вы замените в коде ширину на width:99%; то ширина прокрутки станет равной ширине страницы и текст будет располагаться посередине.

Звонок последний – вестник лета, 
 Он наконец-то прозвенел, 
 И всей сейчас теплом согрето, 
 Получит каждый, что хотел. 
 Такого отдыха желаю, 
 Чтоб было весело всегда, 
 Пусть лето счастьем отвечает 
 На ваши добрые дела!

<div style="overflow-y: scroll; width: 100px; height: 100px;"> Ваш текст</div>  

РОДНЫЕ ДУШИ 
 Что в этой жизни главное?.. - Вниманье! 
Оказанная честь тебе и мне. 
Важней всего – простое пониманье, 
Родившееся в самой глубине. 
 Когда слова и чувства сердце душат, 
Их выплеснуть - не каждому дано. 
Но стоит встретить родственные души, 
И, кажется, мы знали их давно.

2. Скроллбар в простой рамочке и с фоном.

В коде, который вы скопируете можно менять фон внутри рамочки, размеры рамочки и самого скроллбара. Чтобы текст не выходил за пределы рамки по высоте, нужно сделать высоту скроллбара равной или меньше высоты рамки. Можно поменять цвет рамки. Текст форматируем как обычно в визуальном редакторе. Чтобы изменить фон, нужно поставить URL-адрес своей картинки. Находим в интернете нужный фон, выделяем картинку,  щёлкаем по ней правой кнопкой  и выбираем либо свойства, либо открыть изображение, либо копировать URL-адрес, смотря какой браузер у вас открыт. Далее этот URL-адрес вставляете в код в кавычках.

Вот часть кода       background-image: url(' http://img-fotki.yandex.ru/get/4107/natali-1946.20/0_1f307_7f71e9d5_XL');   где вы можете изменить фон внутри рамки.

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

1.scrollbar-face-color – это цвет передней стороны панели прокрутки.

2.scrollbar-shadow-color – это цвет нижней и правой граней панели прокрутки.

3.scrollbar-highlight-color – это цвет верхней и левой граней панели прокрутки.

4.scrollbar-3dlight-color – это цвет отсвета.

5.scrollbar-track-color – это цвет полосы, по которой «ходит» панель прокрутки.

6.scrollbar-arrow-color – это цвет треугольника на верхнем и нижнем квадратах.

7.#FFFFFF – это коды цвета, которые можно менять.

<span style="color: #274e13; font-family: Verdana, sans-serif;"><b><br /></b></span></div> <div style="background-color: #008E00; background-image: url(' http://img-fotki.yandex.ru/get/4107/natali-1946.20/0_1f307_7f71e9d5_XL'); border: outset #008E00 10px; height: 150px; width: 680px;"> <div style="height: 150px; left: 30px; margin: 0px; overflow: auto; padding-bottom: 0px; padding-top: 0px; position: relative; scrollbar-3dlight-color: #B1F28D; scrollbar-arrow-color: #FEF610; scrollbar-darkshadow-color: #09587D; scrollbar-face-color: #006400; scrollbar-highlight-color: #00CC33; scrollbar-shadow-color: #33CC33; top: 0px; width: 670px;"> <div style="text-align: center;"> <span style="color: black; font-family: Monotype Corsiva;">И стоит нам увидеться однажды, </span></div> <div style="text-align: center;"> <span style="color: black; font-family: Monotype Corsiva;">И несколько часов побыть вдвоем, </span></div> <div style="text-align: center;"> <span style="color: black; font-family: Monotype Corsiva;">То сразу нам покажется, что даже </span></div> <div style="text-align: center;"> <span style="color: black; font-family: Monotype Corsiva;">Молчим с тобой как будто об одном. </span></div> <div style="text-align: center;"> <span style="color: black; font-family: Monotype Corsiva;"> Приятные такие совпаденья </span></div> <div style="text-align: center;"> <span style="color: black; font-family: Monotype Corsiva;">Нам редко дарит глупая судьба. </span></div> <div style="text-align: center;"> <span style="color: black; font-family: Monotype Corsiva;">Бывает, что ночные сновиденья, </span></div> <div style="text-align: center;"> <span style="color: black; font-family: Monotype Corsiva;">Реальностью не станут никогда. </span></div> <div style="text-align: center;"> <span style="color: black; font-family: Monotype Corsiva;"> Но все равно поверьте в чувства эти, </span></div> <div style="text-align: center;"> <span style="color: black; font-family: Monotype Corsiva;">Ведь где-то здесь, а, может, где-то там - </span></div> <div style="text-align: center;"> <span style="color: black; font-family: Monotype Corsiva;">Родные души есть на белом свете, </span></div> <div style="text-align: center;"> <span style="color: black; font-family: Monotype Corsiva;">И в этом каждый убедится сам! </span></div> </div> </div> </div>

И стоит нам увидеться однажды, 

И несколько часов побыть вдвоем, 

То сразу нам покажется, что даже 

Молчим с тобой как будто об одном. 

 Приятные такие совпаденья 

Нам редко дарит глупая судьба. 

Бывает, что ночные сновиденья, 

Реальностью не станут никогда. 

 Но все равно поверьте в чувства эти, 

Ведь где-то здесь, а, может, где-то там - 

Родные души есть на белом свете, 

И в этом каждый убедится сам!