Горизонтальный скроллер в CSS
Я пытаюсь добавить в свой контекстный раздел скроллер, который позволит окну прокручиваться только по горизонтали в пределах видимого экрана зрителя, а не по вертикали.
Кто-нибудь знает какой-либо код для прокручиваемого содержимого в div в гибком дизайне макета css?
Кроме того, вот ссылка на веб-сайт с точным эффектом прокрутки, который я пытаюсь воссоздать: http://patrickhoelck.com/home.html
В моем коде горизонтальный скроллер отображается в правильном месте, но у него нет прокрутки. Вместо этого браузер позволяет мне прокручивать весь макет вместо отдельного раздела содержимого.
Установили ли вы фиксированную ширину родительского элемента вашего контента (например, содержащего div)?
Я попытался добавить фиксированный с помощью в свой div, но безрезультатно. Вот код, который я сейчас использую: <div style = "width: auto; height: 375px; overflow-x: auto; overflow-y: hi dden; overflow: -moz-s crollbars-horizontal! Important;" >
К моему ответу добавлен рабочий HTML.
Ответы 2
Вероятно, вы захотите взглянуть на переполнение-x: прокрутка, который, наряду с установкой фиксированного размера для родительского элемента, заставит горизонтальную полосу прокрутки, если содержимое слишком велико.
Некоторый пример html:
<div style = "width: 50px; overflow-x: scroll">
<p>Hello world!</p>
<p>Here is a div with a horizontal scrollbar!</p>
</div>
Код работает отлично. Спасибо! У меня были проблемы с этим в течение нескольких недель.
Does anyone know any code to have scrollable content in a div in a fluid css layout design?
'overflow: auto' при необходимости добавит полосу прокрутки.
Хитрость заключается в том, чтобы убедиться, что содержимое внутри прокручиваемого элемента превышает нормальную ширину элемента, вместо того, чтобы просто перекомпилировать новую строку, и в этом случае она никогда не вызовет полосу прокрутки. Один из способов сделать это - использовать white-space: nowrap.
Сайт, на который вы перешли, использует IFrame для встраивания другой веб-страницы в свою домашнюю страницу. Он не делает этого с помощью CSS. overflow-x сделает то, что вы хотите в CSS.