ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Начался второй тур лотереи для форумов "Новогодний кот". Подаём заявки на участие до 8.12. Не пропустите!
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



FAQ: Создание прокрутки

Сообщений 1 страница 10 из 11

1

В последнее время многие пользователи спрашивают, как поставить прокрутку. Чтобы сэкономить время и им и нам, я выкладываю подробную инструкцию по прокрутке.
Для начала решите, куда Вы будете ставить прокрутку. Это не так важно, но если Вы хотите вставить в таблицу, немаловажно куда в код таблицы Вы впихнете прокрутку. Если куда-нибудь в середину - и таблица и прокрутка, все будет наперекосяк. Так что делаем вот что: в таблице ищите контент, который хотите поставить в прокрутку. Потом в начале и в конце текста ставьте нижеприведенные теги.

<div style="width: 100%; height: 100%; overflow-y: scroll;">ВАШ КОНТЕНТ</div>

Красное - ширина прокрчиваемой области.
Синее - высота.
Розовое - ось прокрутки. y - вертикально, x - горизонтально.
Зеленое - то, что должно прокручиваться, непосредственно, Ваш текст.
Собственно, это всё. Вы создали прокрутку.
Но можно еще сделать полосу прокрутки стилизованной. Сейчас она будет такой же, как прокрутка в браузере, т.е. соответствующей теме в Windows (или других ОС). А можно сделать так, чтобы она была одного цвета независимо от темы и браузера.
Берем наш div - эту строчку:

<div style="width: 100%; height: 100%; overflow-y: scroll;">ВАШ КОНТЕНТ</div>

Добавляем после overflow-y: scroll; одно или несколько из этих свойств:

scrollbar-base-color:lime
Приведет скролл к такому виду:
http://www.tigir.com/images/articles/cssscrollbar_fast.gif
__________

Можно сделать более тонкие настройки, для каждого элемента указывая свои значения:

scrollbar-3dlight-color
- задает цвет верхней и левой границ полосы прокрутки, ее бегунка и стрелок.

-----------------------------------------------------------------------------------------------------

scrollbar-arrow-color
- задает цвет стрелок на кнопках полосы прокрутки.
- задает цвет верхней и левой границ полосы прокрутки, ее бегунка и стрелок.

-----------------------------------------------------------------------------------------------------

scrollbar-darkshadow-color
- задает цвет "тени", отбрасываемой бегунком и кнопками полосы прокрутки (цвет правых и нижних гранией).

-----------------------------------------------------------------------------------------------------

scrollbar-face-color
- задает основной цвет бегунка и кнопок прокрутки полосы прокрутки.

-----------------------------------------------------------------------------------------------------

scrollbar-highlight-color
- задает цвет "освещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет левых и верхних их граней).

-----------------------------------------------------------------------------------------------------

scrollbar-shadow-color
- задает цвет "неосвещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет правых и нижних их граней). Не путать с цветом "тени", задаваемым атрибутом scroll-darkshadow-color.

-----------------------------------------------------------------------------------------------------

scrollbar-track-color
- задает цвет фона полосы прокрутки, той ее части, по которой перемещается бегунок.

http://www.tigir.com/images/articles/cssscrollbar_def.gif

http://www.tigir.com/images/articles/cssscrollbar_active.gif

http://www.tigir.com/images/articles/cssscrollbar_inactive.gif

http://www.tigir.com/images/articles/cssscrollbar.gif

Значения и картинки взяты отсюда: тык

Отредактировано faiko (20.08.11 19:47)

+3

2

faiko
Осталось отметить, что не все браузеры позволяют пользовательские настройки внешнего вида скроллбаров.
Такая роскошь доступна только для некоторых версий Opera и Internet Explorer. Для пользователей остальных браузеров эти красивости окажутся не доступными.

0

3

sadhaka
Верно  http://i.smiles2k.net/aiwan_smiles/smile3.gif
Но это всего лишь украшение, а не обязательная часть. Так что по этому поводу можно не переживать.

0

4

Осмелюсь задать здесь вопрос. Почему у меня высота прокрутки не меняется? Даже когда я меняю значение высоты. Прокрутка все равно ровна высоте одержимого... А ведь я хочу его уменьшить...

0

5

Ап

0

6

Вставила скролл, но он отсекает часть текста справа. Как исправить?
Мой тестовик

0

7

Мёриэль
в div-style добавьте  padding-right: 10px;

+1

8

Спасибо, заработало.

0

9

Генератор кода цвета прокрутки:

http://g-design.net/scrollbar

Ps:В Опере окрас прокрутки давно уже работает!

Отредактировано Deff (12.03.13 23:20)

Подпись автора

Скрипт мгновенных уведомлений new
(для замены от rusff), Платно! писать в Лс на РЕНО

0

10

Блин, как тут всё сложно! :(
--------------------
форум тольятти автоспорт

0