Как добавить скролл на страницу html. Принудительная установка прокрутки в блоке CSS. CSS из демо

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

Совсем коротенькая заметка, просто пришлось реализовать на одном из сайтов, и решил написать об этом в блог, пока готовлю более серьезную статью (виджет скидок), по просьбе одного из читателей. Артем, привет тебе. Я не забыл!

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

Плагин для плавной прокрутки сайта

Для решения поставленной задачи я выбрал плагин Malihu-custom-scrollbar-plugin , так как у него очень много возможностей:

• Вертикальная и / или горизонтальная полоса прокрутки.
• Настраиваемый импульс прокрутки.
• Плавная прокрутка колесиком мыши.
• Плавная прокрутка за ползунок.
• Поддержка клавиатуры и плавная прокрутка стрелочками или PgUp/PgDn.
• Поддержка сенсорных экранов.
• Готовые к использованию темы.
• Ручная настройка с помощью CSS.
• Разные варианты отображения ползунка.
• Возможность добавить плавный скролл различным элементам на странице, у которых он присутствует.

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

«Стоп, плавный scroll в различных блоках это хорошо, но где же сама плавная прокрутка сайта из-за который мы пришли?» — скажете вы. Спокойствие. Сейчас мы этим займемся.

Подключения плагина

Так как выбранное решение — это jQuery плагин, то первым делом и подключим к сайту сам jQuery, если он у вас не подключен.

Теперь скачайте плагин для плавной прокрутки, по ссылке выше, и подключите к сайту 2 файла.

• jquery.mCustomScrollbar.concat.min.js
• jquery.mCustomScrollbar.min.css

Получится такая структура:

Плавный скролл сайта

Главное помните, что все зависящие от jQuery плагины должны подключаться после самого jQuery.

После того как все подключили, нужно инициализировать скрипт:

(function ($) { $(window).on("load", function () { $("body").mCustomScrollbar({ theme: "dark-thin" }); }); })(jQuery);

И добавить в CSS несколько простых правил, чтобы прокрутка применилась к документу. В самом начале вашего файла стилей добавьте следующую разметку:

Body, html { height: 100%; overflow: hidden; }

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

Подключается точно так же как и первый, имеет всего 3 настройки и весит всего 2.6 килобайт:

$(function() { jQuery.scrollSpeed(100, 800, "easeOutCubic"); })

Где первое число — это шаг прокрутки, второе число — это скорость, а третье — тип анимации.

На этом — все. Всем — пока.

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

Overflow в CSS отвечает за то, как будет выглядеть отображение информации в блоке, в случае превышения содержимого высоты или ширины этого блока. Это свойство применимо только к блочным элементам (display : block ; или те которые изначально являются блочными - div и так далее).

Возможные значения, которые принимает это свойство(по-умолчанию visible ):

• Visible - Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
• Hidden - Отображается только область внутри элемента, остальное будет скрыто.
• Scroll - Всегда добавляются полосы прокрутки.
• Auto - Полосы прокрутки добавляются только при необходимости.
• Inherit - Наследует значение родителя.

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

В демо вы сможете пронаблюдать, как действует каждое из значений свойства на деле:

Код HTML

Страница visible hidden

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

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

scroll

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

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

auto

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

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

body {margin:0 0 0 0; padding:0 0 60px 0; font-size:16px;} h2 {color:#CC0033;} div { width:200px; /* фиксированная ширина */ height:300px; /* фиксированная высота */ border:1px solid #555; padding:4px; margin:4px; float:left; } .VisibleDiv {overflow:visible;} .HiddenDiv {overflow:hidden;} .ScrollDiv {overflow:scroll;} .AutoDiv {overflow:auto;}

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

Мы видимо, что текст во всех случаях корректно отображается внутри блока, кроме небольшого неудобства в случае со scroll , где появляются неактивные полосы прокрутки.

Но в этом случае заключается небольшая опасность, встретившись с которой многие не понимают, почему она возникла и как ее исправить. Дело в том, что если блок с overflow : visible ; то есть значением по-умолчанию, а его содержимое имеет элементы с любым значением float , кроме none , то отображаться все это будет некорректно. Для того, чтобы понять, что это за ситуация, рассмотрим пример:

Страница Под блоком VisibleDiv идет другой блок visible

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

Идет сразу после дива с overflow:visible (значением по-умолчанию) Под блоком VisibleDiv ничего нету visible

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

body {margin:0 0 0 0; padding:0 0 60px 0; font-size:16px;} h2 {color:#CC0033;} p {float:left;} div { width:500px; height:auto; border:1px solid #555; padding:4px; margin:4px; } .VisibleDiv {overflow:visible;background: rgba(0,255,0,0.1);} .ignor {background: rgba(0,255,0,0.6); color:#FFFFFF; font-weight:bold;}

В первом случае, видно, что содержимое с свойством float выезжает за пределы блока и не учитываются им при определении высоты блока, во втором случае под блоком с overflow : visible ; специально размещен другой блок и закращен в другой цвет. Это не единственные примеры того, как может себя вести на странице такие блоки (с overflow : visible ; и height : auto ; ). Исправляется это заменой значения visible на hidden , следует помнить, что это свойство стоит указывать только блокам с height : auto ; , если будет фиксированная высота, то велик шанс, что содержимое просто скроется, если оно больше заданной высоты.

Вот как будет выглядеть исправленный вариант:

Так же у вас не возникнет такой проблемы, если блоку с overflow : visible ; и height : auto ; задано еще и какое-нибудь значение свойства float . Вообще во многих случаях отображение элементов зависит от набора свойств, а не от отдельных свойств.

3. Принудительная установка вертикальной и горизонтальной прокрутки в блоке CSS
4. Пример div блока с прокруткой

В данной статье мы разберём вопрос создания блока (div) фиксированного размера с возможностью прокрутки по горизонтали и вертикали. Это можно реализовать средствами CSS. За это отвечает свойство overflow .

О полезном свойстве overflow Свойство overflow отвечает за отображение содержания блочного элемента. Можно применить в том случае, когда контент не помещается полностью и выходит за область блока.

overflow-x - отвечает за отображением содержания блочного элемента по горизонтали.
overflow-y - отвечает за отображением содержания блочного элемента по вертикали.

Код CSS

Prokrutka {
overflow: auto; /* свойство для прокрутки по горизонтали. Автоматом, если содержимое больше блока */
}

Свойства и значения overflowvisible - отображается все содержание элемента, даже за пределами установленной ширины.
hidden - отображается только область внутри элемента, остальное скрыто.
scroll - принудительно добавляется горизонтальная (y) или горизонтальная (x) полоса прокрутки.
auto - автоматом добавляется горизонтальная полоса прокрутки, в случае если блок меньше.

Рассмотри пример класса CSS. В width и height устанавливаем нужные нам ширину и высоту блока (за них не будет выходить содержимое блока), а свойством overflow: auto; задаем прокрутку по горизонтали в случае надобности

Код CSS

Prokrutka {
width:150px; /* ширина нашего блока */
height:100px; /* высота нашего блока */


overflow: auto; /* свойство для прокрутки по горизонтали. Автоматом, если больше блока */
}

Принудительная установка прокрутки в блоке CSS Можно также принудительно создать прокрутку по высоте и ширине. Для этого каждой оси: overflow-y: scroll; (вертикаль) overflow-x: scroll; (горизонталь) укажем параметр scroll, принудительная прокрутка.

Код HTML и CSS

Prokrutka {
height:150px; /* высота нашего блока */
background: #fff; /* цвет фона, белый */
border: 1px solid #C1C1C1; /* размер и цвет границы блока */


}

Пример div блока с прокруткойКод HTML и CSS

Пример работы CSS

.prokrutka {
height: 200px; /* высота нашего блока */
width: 200px; /* ширина нашего блока */
background: #fff; /* цвет фона, белый */
border: 1px solid #C1C1C1; /* размер и цвет границы блока */
overflow-x: scroll; /* прокрутка по горизонтали */
overflow-y: scroll; /* прокрутка по вертикали */
}

А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации.



Одно из свойств overflow можно убрать, тогда останется прокрутка только по одной оси, чего вполне достаточно.
Посмотреть работу скрипта на примере ниже.

Приветствую, дорогие друзья. Как Вы возможно заметили, что практически во всех браузерах прокрутка на сайтах очень резкая и не красивая. И конечно же хотелось бы сделать прокрутку для своего сайта более плавной, естественно это можно сделать и к тому же сильно не напрягаться. Делается это с помощью простого JQuery плагина и нескольких правил CSS. А для того, чтобы посмотреть как это всё работает предлагаю Вам взглянуть на демо, которое находится ниже.

Ι

Ну а теперь давайте перейдём прикреплению плавной прокрутки к нашему сайту.

HTML

Для начала нам нужно будет прикрепить библиотеку JQuery. Если она у Вас уже прикреплена, пропустите этот шаг:

Затем нам нужно прикрепить сам JQuery плагин, который и отвечает за нашу плавную прокрутку, и вместе с ним же идут отдельные правила CSS которые изменяют саму полосу прокрутки на сайте. Подробнее на счёт полосы прокрутки мы поговорим подробнее в следующем уроке, а пока что только плавная прокрутка. А вот и сами правила и плагин:

Всё. Теперь первый и немаловажный шаг мы уже сделали. Теперь нам нужно добавить одно простое правило в стили CSS нашего сайта.

CSS html, body{ height: 100%; }

Это нужно для того, чтобы дать понять нашему плагину, что ширина страницы растянута и является 100% в высоту. Обязательно добавьте это правило в CSS иначе прокрутка работать не будет.

Скрипт

А сейчас предлагаю подробнее разобрать демо пример. И начнём мы с HTML.

HTML в демо Плавная прокрутка для сайта Контент Привет, Это текст для демонстрации плавной прокрутки страниц на Вашем сайте. Действительно не плохо смотрится, не правда ли:) Этот текс будет повторяться. (function($){ $(window).load(function(){ $("body").mCustomScrollbar({ theme:"dark-thin" }); }); })(jQuery);

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

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

CSS из демо @import url(http://fonts.googleapis.com/css?family=Bad+Script&subset=latin,cyrillic); @import url(http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic); body{ background-color: #fff; color: #555; font-size: 14px; font-family: "Bad Script", cursive; margin: 0; padding: 0; min-width: 480px; } html, body{ height: 100%; } h2{ font-size: 80px; text-align: center; font-family: "Lobster", cursive; font-weight: 700; font-style: italic; color: #444; } hr{ height: 0; border: none; border-bottom: 1px solid #eee; border-top: 1px solid #eee; margin-bottom: 50px; clear: both; } .cont{ font-size: 30px; margin: 0 auto; padding-top: 20px; width: 50%; max-width: 50%; } .text{ padding-top: 15px; padding-bottom: 20px }

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