Несколько вариантов оформления полосы прокрутки

скролл
Всем привет. Набросала, как можно с помощью стилей CSS сделать различные варианты оформления полосы прокрутки.  Иногда возникают моменты, когда нужно заключить текст в скролл. Сама часто применяю при публиковании длинных кодов. Обратимся к  Википедии.

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

Всё совершенно просто. И, если вам интересно, поиграйтесь с любым из кодов, меняя выделенные цветом элементы, на свои.

Самая обычная полоса прокрутки. Свойство overflow-y управляет отображением содержания блочного элемента по вертикали,

 <div style="height: 150px; line-height: 3em; overflow-y: scroll; padding: 5px; width: 150px;">
Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст
</div>

Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст

1. Сделаем фон внутри поля полосы прокрутки.


<div style="background-color: #fcfadd; color: #714d03; height: 150px; line-height: 3em; overflow-y: scroll; padding: 5px; width: 250px;">
Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст
</div>

Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст


2. Так же меняем цвет фона и шрифта. Увеличим ширину скролла и уберём свойство height: 150px; line-height: 3em;. В результате будем иметь авто прокрутку для текста.

<div style="width:250px;overflow-y:scroll;padding:5px;background-color:red;color: white;">
Здесь будет ваш длинный предлинный и очень нужный текст
</div>

Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текстЗдесь будет ваш длинный предлинный и очень нужный текст

3. Вместо основного фона вставим картинку. Это что-то наподобие того, о чём писала в этой шпаргалке. 

<div style="background: url(адрес картинки); color: #714d03; height: 150px; line-height: 3em; overflow-y: scroll; padding: 5px; width: 250px;">Здесь всё, что хотите об этом сказать, т.е. длинный предлинный текст
</div>


Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст

4. Сделаем рамку.

<div style="border: 6px ridge #debb07; height: 150px; line-height: 3em; overflow: scroll; padding: 5px; width: 150px;">
Здесь будет ваш длинный предлинный и очень нужный текст
</div>

Здесь будет ваш длинный предлинный и очень нужный текст

5. Двойная рамка.

<div style="width:250px;height:150px;line-height:3em;overflow:scroll;padding:5px;border:6px double #DEBB07;">
Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст
</div>


Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст

5. Такая рамка.

<div style="width:150px;height:250px;line-height:3em;overflow-y:scroll;padding:5px;border:12px solid #DEBB07;">
Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст
</div>

Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст

Вообще, таким образом, если пофантазировать, можно создать очень необычные варианты полосы  прокрутки.

Сегодня у меня всё. Всем лета, солнца, отдыха. Спасибо за визит.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


1 комментарий:

Пользовательский поиск
Foto Saya
My Photo