Часто необходимо сделать прокрутку внутри страницы не используя фреймы, например нужно сделать список чего-нибудь, но свойство overflow: scroll; в некоторых (вру, во всех) браузерах постоянно, по надобности и не по надобности выводит обе полосы прокрутки (both scrolls), но горизонтальная полоса, как правило не нужна и ужасно портит дизайн сайта.

Можно использовать свойства overflow-x: scroll (auto) – покажет горизонтальную полосу прокрутки постоянно (только когда понадобится), overflow-y: scroll (auto) – аналогично, только вертикальную , если что-то не получается, то можно изобрести что-то типа такого:

Способ который можно назвать «зло победит зло». Чтобы скрыть горизонтальную прокрутку у элемента с CSS-свойством overflow: scroll; можно просто создать родительский для этого элемента, меньший по высоте элемент с overflow: hidden;

Код:

<div style="width: 400px; height: 183px; overflow: hidden;">
 <div style="width: 400px; height: 200px; overflow: scroll;">
	Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
 </div>
</div>

До процедуры:

После процедуры:

Способ кроссбраузерный, работает везде. Рекомендовано к употреблению.

Сохранить ссылку на статью |

Только сегодня, ты можешь подписаться на изменения в RSS 2.0

Tags: css, overflow, web

Эта статья написана в Понедельник, Ноябрь 16th, 2009 at 20:18 в разделе Web-разработка. Вы можете подписаться на обновления комментариев к статье - RSS 2.0. Вы можете оставить комментарий, или послать пинг со своего сайта.