Горизонтальный скроллер в CSS

Question

Я пытался добавить скроллер в свой контекстный раздел, который позволит прокручивать блок только по горизонтали в пределах видимой части экрана зрителя, а не по вертикали.

Кто-нибудь знает какой-нибудь код с прокручиваемым содержимым в div в дизайне флюидного CSS-кода?

Кроме того, вот ссылка на веб-сайт с точным эффектом прокрутки, который я пытаюсь воссоздать: http://patrickhoelck.com/home.html

Answer 1

Кто-нибудь знает какой-либо код с прокручиваемым содержимым в div в дизайне флюидного CSS-кода?

«Переполнение: авто» добавит полосу прокрутки при необходимости.

Хитрость заключается в том, чтобы убедиться, что содержимое внутри прокручиваемого элемента превышает нормальную ширину элемента, вместо простого перекомпоновки в новую строку, в этом случае она никогда не вызовет полосу прокрутки. Один из способов сделать это - использовать white-space: nowrap.

Answer 2

Возможно, вы захотите взглянуть на overflow-x: scroll , который, наряду с установкой фиксированного размера для родительского элемента, принудительно установит горизонтальную полосу прокрутки, если содержимое слишком широкое.

Пример html:

<div style="width: 50px; overflow-x: scroll">
    <p>Hello world!</p>
    <p>Here is a div with a horizontal scrollbar!</p>
</div>