Создаем блок с прокручиваемым текстом с помощью CSS и HTML
0 ∞ 1- Создаем блок с прокручиваемым текстом с помощью CSS и HTML
- Что делать с дополнительным текстом?
- Вы можете добавить полосы прокрутки не только для текста
- Полосы прокрутки могут использоваться в таблицах
- Firefox поддерживает использование overflow для тегов TBODY
Прокручиваемый HTML-блок — это блок, в котором, когда его содержимое больше размеров самого блока, справа и снизу появляются полосы прокрутки. Другими словами, если у вас есть блок, в котором может поместиться около 50 слов, и у вас есть текст, состоящий из 200 слов, в прокручиваемом HTML-блоке появятся полосы прокрутки, чтобы вы могли видеть остальные 150 слов. В стандартном HTML-блоке дополнительный текст просто выходит за его границы.
Создать прокручиваемый HTML-блок (скролл для сайта) довольно просто.
Вам просто нужно установить ширину и высоту элемента, а затем использовать свойство CSS overflow, чтобы указать поведение элемента, когда содержимое выходит за его пределы.
Когда текста больше, чем может поместиться в доступное пространство макета, у вас есть несколько вариантов:
- Перепишите текст, чтобы он стал короче.
- Позвольте, чтобы текст выходил за пределы контейнера, и надейтесь, что макет может растягиваться, чтобы справиться с этой ситуацией.
- Обрежьте текст там, где он выходит за пределы контейнера.
- Добавьте полосы прокрутки (для текста — обычно вертикальные), чтобы с их помощью можно было просмотреть весь текст.
Лучшим вариантом, как правило, является последний: создать прокручиваемый текстовый блок. Тогда пользователь сможет прочитать весь текст, а макет останется без изменений.
HTML и CSS для этого:
<div>здесь текст....</div>
overflow: auto; указывает браузеру добавлять полосы прокрутки (скролл), если текст выходит за границы блока div.
Но для того, чтобы это сработало, также нужно задать для этого блока div свойства ширины и высоты, чтобы определить границы контейнера.
Вы также можете обрезать текст, изменив значение свойства overflow с auto на hidden. Если вы не укажете свойство overflow, скролл на сайте работать не будет, и текст будет выходить за границы блока div.
Если у вас есть большое изображение, которое вы хотите отображать на меньшем пространстве, можно добавить вокруг него полосы прокрутки так же, как и для текста.
<p><img src="images/shasta_with_disc.jpg" alt="Shasta playing frisbee" /> </p>
В этом примере изображение размером 400 на 509 пикселей размещено внутри абзаца, размер которого составляет 300 на 300 пикселей.
Длинные таблицы могут быть очень трудными для восприятия, но, помещая их в блок div ограниченного размера, а затем, добавляя свойство overflow (как способ сделать скролл), можно создавать таблицы с большим количеством данных, которые не займут слишком много пространства на странице,
Самый простой способ сделать это — так же, как изображение и текст, просто оберните таблицу в блок div, установите его ширину и высоту и добавьте свойство overflow (скролл внутри div):
<div><table> <thead> <tr> <th>Name</th> <th>Phone</th> </tr> </thead> <tbody> <tr> <td>Jennifer</td> <td>502-5366</td> </tr> .... </tbody></table></div>
Однако при этом имеет место один нюанс. В подобных случаях, как правило, также появляется горизонтальный скролл, потому что браузер предполагает, что, чтобы дать пользователю возможность просмотреть всю таблицу, нужны две полосы прокрутки.
Существует множество способов исправить это, например, изменение ширины таблицы и некоторые другие. Но я предпочитаю просто отключить горизонтальную прокрутку с помощью свойства CSS3 overflow-x. Просто укажите для блока div свойство overflow-x: hidden;, и горизонтальная полоса прокрутки будет удалена. Обязательно проверьте, чтобы одновременно с этим у вас не исчез и сам контент.
<div>
Одна действительно приятная особенность браузера Firefox заключается в том, что вы можете использовать свойство overflow во внутренних тегах таблиц, таких как tbody и thead или tfoot. Это означает, что вы можете установить полосы прокрутки для содержимого таблицы, а ячейки заголовков останутся привязанными к ним.
Это работает только в Firefox, что не очень хорошо, но это полезная функция, если ваши читатели используют только Firefox. Посмотрите следующий пример, чтобы понять, что я имею в виду.
<table>
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jennifer</td>
<td>502-5366</td>
</tr>
... Вадим Дворниковавтор-переводчик статьи «HTML Scroll Box»
Дайте знать, что вы думаете по этой теме в комментариях. За комментарии, отклики, лайки, подписки, дизлайки низкий вам поклон!
html — Ползунок прокрутки при overflow scroll. Возможность переместиться по блоку
Вопрос задан
Изменён 1 год 7 месяцев назад
Просмотрен 427 раз
У меня есть блок в блоке и мне нужно добиться, чтобы у блока second_div снизу появилась полоса прокрутки.
А также у этих полос прокрутки появились ползунки, и я мог переместиться в любое место в этом блоке second_div. Вот мой код https://jsfiddle.net/ManuOP/aopk3new/8/
Если создать один блок, без вложений, то результат получается тот, который меня устраивает, но мне нужно, чтобы блок с ползунками не выходил за рамки основного блока
Спасибо.
HTML
<div> <div>Hello</div> </div>
CSS
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
display: flex;
}
div#main_div {
height: 80vh;
width: 80vw;
background: red;
overflow: hidden;
}
div#second_div {
height: 10000px;
width: 10000px;
background: green;
overflow: scroll;
}
- html
- css
- scroll
- overflow
- hidden
У тебя overflow: scroll; должен стоять на родителе, а не дочернем элементе, плюс div {display: flex;} нужно убрать. Код будет выглядеть так:
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div#main_div {
height: 80vh;
width: 80vw;
background: red;
overflow: scroll;
}
div#second_div {
height: 10000px;
width: 10000px;
background: green;
position: relative;
}
И парочка советов:
- Не стоит использовать id, лучше классы.
- Если обнулять маргины-паддинги, то лучше у всего. То есть, не html html, body { margin: 0; …}, а * {margin: 0; …}
Зарегистрируйтесь или войдите
Регистрация через GoogleОтправить без регистрации
ПочтаНеобходима, но никому не показывается
Отправить без регистрации
ПочтаНеобходима, но никому не показывается
By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.
Как создать контейнеры с горизонтальной прокруткой | Колин Лорд
Опубликовано в·
Чтение: 4 мин.·
27 марта 2017 г.Как разработчик интерфейса, я все чаще и чаще получаю проекты, включающие компонент горизонтальной прокрутки. Это стало особенно распространенным на мобильных устройствах, чтобы помочь уменьшить вертикальную высоту плотных страниц. Мы все видели их раньше. У нашего компа есть что-то вроде этого:
После создания пары таких и борьбы с неожиданными ошибками в процессе контроля качества я хотел раз и навсегда выяснить, как создать горизонтальный скроллер с минимальным кодом, который работал бы должным образом во всех типах. устройств.
Давайте сначала создадим наш контейнер и наши дочерние элементы div внутри него, которые будут прокручиваться горизонтально. HTML довольно прост.
Карточка
Карточка
Карточка
< /div>
Карточка
Карточка
Карточка
Карточка
Card
Card
Существует два разных способа горизонтальной прокрутки этих элементов div.
и какой путь вы выберете, вероятно, зависит от личных предпочтений и / или поддержки браузера.
Вот весь CSS, который нам нужен. Никаких префиксов поставщиков, никакого jQuery, только простое использование переполнения и свойство, о котором вы, вероятно, не слышали.
.scrolling-wrapper {
переполнение-x: прокрутка;
переполнение-y: скрыто;
пробел: nowrap; .card {
дисплей: встроенный блок;
}
}
В нашем контейнере мы хотим отключить вертикальную прокрутку (переполнение-y) и включить горизонтальную прокрутку (переполнение-x). Затем для каждой карточки мы хотим настроить ее отображение со встроенным блоком, чтобы все они отображались подряд.
Строка CSS, с которой вы, вероятно, не знакомы, это пробел: nowrap. Это свойство используется для управления обтеканием контейнера текстом. В этом случае мы хотим отключить эту упаковку с помощью nowrap.
Вот и все. Четыре строки свойств CSS и у нас есть контейнер с горизонтальной прокруткой.
Что касается поддержки браузера? Идеально. Если вы не заботитесь об Internet Explorer или Edge. Microsoft говорит, что они, вероятно, включат его в будущую версию Edge. Но пока это недоступно.
Flexbox может сделать это и для нас.
.scrolling-wrapper-flexbox {
display: flex;
flex-wrap: nowrap;
переполнение-x: авто; .card {
flex: 0 0 авто;
}
}
По сути, мы используем flex-wrap для достижения того же эффекта, что и пробел выше. Нет никакой реальной разницы между тем, что делают эти два свойства.
Браузер поддерживает решение flexbox лучше. Возможно, вам придется использовать некоторые префиксы поставщиков для старых браузеров, но, по крайней мере, это решение работает с IE и Edge.
Веб-страницы на iOS прокручиваются с ускорением, если вы прокручиваете вверх и вниз. Если вы быстро проведете пальцем вверх или вниз, страница продолжит прокручиваться после того, как вы отпустите палец. Если вы дойдете до верхней или нижней части страницы, страница подпрыгнет за конец обертки, прежде чем вернуться на место.
Для горизонтального элемента по умолчанию такой плавной прокрутки не будет.
К счастью, его легко включить. Просто помните, хотя в префиксе написано webkit, это наиболее заметно на iOS.
.scrolling-wrapper {
-webkit-overflow-scrolling: touch;
} Теперь у нас есть плавная прокрутка на горизонтальном контейнере. Вот пример того, как это выглядит:
По умолчанию контейнер с прокручиваемым содержимым будет иметь полосы прокрутки. Имеет смысл, верно? Но что, если нам не нужна эта полоса прокрутки для целей UX или дизайна? Ну это тоже просто. Однако это только для браузеров webkit.
.scrolling-wrapper {
&::-webkit-scrollbar {
display: none;
}
} Глядя на этот код, это не так уж и сложно. Но он использует ряд свойств, которые не используются на регулярной основе и поэтому, вероятно, не так знакомы.
Поскольку это становится все более распространенным элементом дизайна, будет разумно хранить эти фрагменты в файле, потому что они, вероятно, понадобятся вам снова и снова.
Что здорово, так это то, что это довольно просто, вы можете обернуть это внутри медиа-запроса и отображать горизонтальную прокрутку только для определенных устройств. Нет головной боли из-за jQuery или чего-то грязного.
Обновление: Если вам нужно решение CSS Grid, Дэнни Винтер изучил эту тему!
Как создать прокручиваемый текст в HTML?
Обзор
HTML-тег