Скроллы на блоках

[D Ash]

Well... Когда-то давно искал способ сделать в дайри блоки с горизонтальной прокруткой, но было не критично, так что забил. Второй раз попробовал весной, тогда успеха уже добился. А на деле всё очень просто.

Итак. Зачем это нужно? Удобно при создании списка или галереи. Как это работает?

Используйте этот код:

<div style="white-space:nowrap; overflow-x:auto;">ваш_контент</div>

Да, вся фишка в настройках white-space по умолчанию в дайри. Можете добавить внутрь style'а width и\или height, чтобы контролировать размеры блока.

---

[upd]

Для вертикального скроллбара стоит использовать overflow-y. В white-space нужда пропадает. Но нужно указывать height, иначе блок автоматически растянется.

Ещё об overflow. Если не прописывать -x\-y - срабатывает на обе оси. Если в качестве значения поставить scroll вместо auto - бары будут видны всегда, даже когда контент не превышает размер блока. invisible, напротив, не покажет скроллы, даже если контент уйдёт далеко (что приводит к потере контента, ясно). visible позволяет контенту уходить за пределы блока (и налазить на другие элементы, как следствие). Slt.

Примеры.

Примеры.

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

Более практичные примеры можно найти здесь и здесь (вообще, в любом посте днева, где есть фото, но блог сейчас слегка перегружен, так что ради экономии вашего трафика, думаю, лучше дать ссылку на конкретно этот).

запись создана: 14.07.2011 в 17:24

@темы: CSS, Теги оформления записи, Записи, Комментарии

Comments

[Тайя.]

Прикольно)

[D Ash]

Тайя, которая душит романтиков
^_^

[jumamono]

оо, полезная штука=)

[D Ash]

jumamono
^_^

вертикальный?

[[TrusT]]

funny-boneв вертикальном оверфлоу - y, вроде)

сенкс.

[Тайя.]

Вертикальный сделать вообще простенько:

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

<div style="overflow: auto; height:XXpx;">текст</div>

[D Ash]

Да, в вертикальном нет проблемы с white-space'ами.

Speaking of that "overflow" thing. Если не прописывать -x\-y - срабатывает на обе оси. Если в качестве значения поставить scroll вместо auto - бары будут видны всегда, даже когда контент не превышает размер блока. invisible, напротив, не покажет скроллы, даже если контент уйдёт далеко (что приводит к потере контента, ясно). visible позволяет контенту уходить за пределы блока (и налазить на другие элементы, как следствие). Slt.

спасибо за разъяснения

[Тайя.]

D Ash, оффтоп, но: вы не знаете, можно ли сделать вертикальный скроллбар у таблицы? По умолчанию, скроллбар у таблицы можно задать горизонтальный, а можно ли сделать вертикальный?

111110	222222	33333333
444444444444444	55555555555 888888888999999999999999999999999999999999999888888888888888888888888888888888888888	7777777777777777777777777777
111110	222222	33333333
111110	222222	33333333

<div style="overflow: auto">Таблица</div> 

[[TrusT]]

Тайя, которая душит романтиков а вот это мне понадобится))
спасибо)

[D Ash]

funny-bone
^_^

Тайя, которая душит романтиков
Ну да, а в чём проблема? overflow ведь не на контент вешается, а на блок. Там и посложнее объекты могут быть (скажем, flash или фреймы). Только при вертикальном всегда height указывать стоит, по умолчанию оно растягивается по контенту.

1	1	1
1	1	1
1	1	1
1	1	1
1	1	1
1	1	1
1	1	1
1	1	1
1	1	1
1	1	1
1	1	1
1	1	1
1	1	1

<div style="height:50px; overflow-y:scroll;"><table border="1"><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr></table></div>

[кавайный укэ]

Тайя, которая душит романтиков спасибо за код для вертикального прокручивания.
D Ash спасибо. Узнал много нового.

[D Ash]

кавайный укэ
^_^

[Тайя.]

D Ash, спасибо

[D Ash]

Тайя, которая душит романтиков
^_^