Блок с прокруткой на странице сайта


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

А начнем мы с блока прокрутки на любой странице сайта.

Блок с прокруткой на странице сайта:

Иногда на своем сайте приходится публиковать какие-то коды, или длинные записи, например, в одну строку. Возникает вопрос, как это реализовать на практике. Так вот, предлагаемый метод: блок с прокруткой на странице сайта сможет сделать человек, который и представления не имеет, что такое языки HTML и CSS.

Ничего кодировать не нужно

Я уже подготовил нужный отрывок кода, который просто нужно скопировать и вставить на страницу сайта в нужное место и, естественно, добавить нужный контент в код.

Код адаптивный, без переноса строк.

Демонстрация блока с прокруткой с текстом:

Текст вставляется здесь:
Здесь я пишу всякую ерунду, чтобы поисковые
системы не посчитали этот отрывок текста за дубляж контента.
А вы ставьте сюда что хотите, можно поставить картинки, и прочие элементы страницы вашего сайта.
Можно добавлять пробелы в данный блок для наглядности я это и демонстрирую.
Здесь я опять пишу всякую ерунду, чтобы поисковые
системы не посчитали этот отрывок текста за дубляж контента. А вы ставьте сюда что хотите,
можно поставить картинки, и прочие элементы страницы вашего сайта.

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

Что нужно для реализации блока с прокруткой

Все, что от вас потребуется, это скопировать или скачать файл себе на компьютер и просто запомнить куда вы его положили. Так как блок с прокруткой на странице сайта мы используем не часто. Кстати, это еще одна из причин, по которым я здесь не стал публиковать другие, более сложные варианты прокрутки на странице.

Код блока с прокрутками

<div style="height:200px; width:100%; border:1px solid #eeeeee; overflow:auto; word-wrap:normal; white-space:pre; padding:10px 15px;margin:20px 0px;">
Текст вставляется здесь между уголков
</div>

Этот код нужно просто скопировать или лучше скачать ниже.

Пояснения по коду:

  • height:200px — Высота блока, заданная в пикселах, меняйте высоту на нужную;
  • width:100% — Ширина на весь контейнер, растянут на всю ширину страницы, при изменении ширины страницы, блок подстраивается под нее;
  • border:1px solid #eeeeee — Сплошная обводка блока для визуализации границ, светло-серого цвета;
  • overflow:auto — Полосы прокрутки появляются только при необходимости;
  • word-wrap:normal — Задаем перенос строк, а точнее, наоборот, строки не переносятся, либо переносятся принудительно. Это свойство, совместно с overflow и white-space и задает нужные параметры отображения блока с прокруткой;
  • white-space:pre — Текст показывается с учетом всех пробелов и переносов и если не вмещается по ширине и высоте, то добавляются полосы прокрутки;
  • padding:10px 15px — Внутренние отступы. 10px — сверху и снизу, 15px — слева и справа;
  • margin:20px 0px — Внешние отступы. 20px — сверху и снизу, 0px — слева и справа;

Найдите справочник CSS в интернете и меняйте стили блока с прокруткой под дизайн своего сайта.

Я подготовил дополнительно текстовый файлик. Скачать файл прокрутки можно здесь:

 
Теперь остается открыть скачаный файл в notepad++, кстати, кто еще не установил его себе на компьютер, то советую установить. Как раз для редактирования небольших кодов подойдет. Ну или можно открыть этот файл любым текстовым редактором, какой есть у вас в наличии и заменить надпись «Текст вставляется здесь» на любую свою запись, или код, требующий неразрывной строки. Эта прокрутка работает как вертикально, так и горизонтально.

Далее копируем и вставляем уже в редакторе своего сайта в статью (имеется ввиду текстовый редактор который используется когда вы публикуете запись или страницу), где угодно. Смотрим как получилось, регулируем размеры блока прокрутки, если надо. Вставлять прокрутку нужно в текстовом, html режиме редактирования. Должно получиться как у меня в демо примере.

Ну как вам? Все довольно легко и просто! Не забывайте делится статьей с одномышленниками в соц. сетях. Задавайте вопросы, делитесь своими мыслями на этот счет. До скорых встреч!

S-panda. Обучение в sheridan college canada оквилл. Помощь в подготовке к поступлению.


Похожие по Тегам статьи


3 thoughts on “Блок с прокруткой на странице сайта

  1. ZeroXor

    Эээ… так это ж простой div с фиксированной шириной…

  2. Егор Автор записи

    Прошу прощения, за задержку ответа, Akismet спрятал ваши комментарии.

    Ну да, зато проще некуда.

  3. Егор Автор записи

    Кстати, можно этот блок div оформить как следует, сами знаете, и вывести кнопку добавления в редакторе, но сейчас их существует уже целая куча. Просто меняй стиль и все.