Как сделать скролл сверху и снизу блока

Добавил пользователь Валентин П.
Обновлено: 01.09.2024

Здесь могла бы быть ваша реклама

Помог: 3 раз(а)

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

После этого приходится начинать уточнять этим неграмотным что мне надо.
Они что, сами читать не умеют? А уточнять приходится.
И иногда пока они переварят то что я им скажу проходит и не одна ночь..

Уверен что если бы я им сказал что у меня есть
фиолетовый квадрат, и нужно превратить его в синий треугольник
и я пытался взять кисточку, макнуть в банку и поводить ей по квадрату
но почему то кисточка не принимала цвет краски в банке,
то на мой вопрос - где взять правильные банки мне бы ответили гораздо быстрее
предложив её открыть, а не тратить еще стольник на жестянку.

Поэтому с тех пор я строю свои вопросы по проверенной давным давно схеме:
Что есть
Что нужно получить
Как я пытался
Почему или что у меня не получилось.

На последок как оно происходит на форумах

Отредактировано модератором: Uchkuma, 26 Апреля, 2011 - 10:21:12

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Лучший способ отблагодарить автора

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

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

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

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

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

Исходный вариант, когда ничего не плавает

Изначальные данные: блок уже спозиционирован. У меня как-то так с большим футером, у вас — иначе.

Как сделать блок (div, aside и т.п), шапку, рекламу, меню фиксированными. Только CSS

Реализуется благодаря свойству position в значении fixed . Задать положение элемента на экране можно с помощью свойств top , bottom , left , right .

Но, поскольку они ведут отсчёт от краёв окна браузера, а мониторы имеют разное разрешение экрана, то лучше сразу правильно разместить блок, опираясь на свойства margin , transform: translate; , text-align .

Плавающий блок, замирающий над футером или другим элементом. Чистый JavaScript без jQuery

Чтобы плавающий блок не исчезал, не заезжал на подвал сайта, а останавливался над указанным элементом.

Элемент прилипает только во время прохождения скроллом другого элемента

Чтобы элемент отцеплялся и останавливался, когда заканчивается поле article . То есть нижние границы article и aside должны быть на одной линии.

Как сделать, чтоб прилипали два (необязательно) блока в обоих сайдбарах

Фиксируется два и более блока друг за другом

При листании вниз прилипает первый блок, когда родитель заканчивается — отлипает; прилипает второй, когда родитель заканчивается — отлипает; прилипает третий и т.д.

То же самое, только с общим родителем.

Плавающая длинная боковая колонка без пустого пространства

При скроллинге вниз боковая колонка прилипает, когда её нижний край касается нижнего края окна браузера. При скроллинге вверх боковая колонка прилипает, когда её верхний край касается верхнего края окна браузера. Есть нижний предел, до которого доходит колонка.

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

На сегодняшний день, можно очень простым способом изменить внешний вид всем надоевшей серой полосы прокрутки. И для этого не нужно подключать сторонние библиотеки или писать JavaScript код, а достаточно запомнить несколько CSS свойств. Правда, такой способ имеет поддержку, только у популярных -webkit браузеров - Chrome, Safari, Opera.

Данные CSS свойства не будут работать в IE и Firefox, но поскольку большинство пользователей, сегодня выбирают Chrome, то можно смело эти свойства применять в своих проектах. Ничего страшного не произойдет, если немногочисленные пользователи других браузеров, увидят не кастомную полосу прокрутки (scrollbar), а дефолтную.

Свойство -webkit-scrollbar

Свойство -webkit-scrollbar служит контейнером для всех элементов полосы прокрутки: ползунка и дорожки. Его стандартная ширина равна 17 пикселям, но мы можем задавать любую ширину.

::-webkit-scrollbar width: 25px; /* ширина нового скроллбара */
>

Свойство -webkit-scrollbar-track

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

Мы видим, что дорожка покрасилась в светло-розовый цвет.

Свойство -webkit-scrollbar-thumb

Свойство -webkit-scrollbar-thumb кастомизирует ползунок, который бегает по дорожке. Теперь покрасим наш ползунок в темно-розовый цвет, скруглим у него углы и зададим рамку.

В качестве дополнения на ползунок можно повесить картинку.

Очень круто будет смотреться линейный градиент.

Свойство -webkit-scrollbar-button

Свойство -webkit-scrollbar-button отвечает за навигационные стрелочки, которые были сверху и снизу у стандартной полосы прокрутки.

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

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

Читайте также: