Как сделать скроллинг на сайте html

Как сделать скроллинг на сайте html


1. Что такое overflow в CSS?
2. Свойства и значения overflow
3. Принудительная установка вертикальной и горизонтальной прокрутки в блоке CSS
4. Пример div блока с прокруткой

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

О полезном свойстве overflow

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

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

Код CSS

Свойства и значения overflow

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

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

Код CSS

Принудительная установка прокрутки в блоке CSS

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

Код HTML и CSS

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

Код HTML и CSS

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

Читайте также:  Чистая установка windows 10 pro

Демонстрация Скачать исходники
Можно указать принудительную прокрутку только для одной оси. Для этого соответственно уберите строку либо с overflow-x, либо с overflow-y.

Спасибо за внимание! Надеюсь статья была полезна!

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

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

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

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

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

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

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

Итак, самое время посмотреть демку. Автор уже приготовил отличный вариант:

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

Читайте также:  Ведьмак 2 путь йорвета глава 3

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

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

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

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

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

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

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

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

Обратите внимание, что на этой странице около 50 опций для тонкой настройки плагина. Например, в исходнике я использую следующие:

  • theme: — тема для отображения скролла;
  • autoHideScrollbar — включение или отключение автоматического скрытия полосы прокрутки при неактивном состоянии;
  • autoExpandScrollbar — включение или отключение автоматического расширения полосы прокрутки при перемещении курсора или перетаскивании полосы прокрутки;
  • scrollEasing: — тип анимации;
  • mouseWheel: < scrollAmount: ‘300’ >— количество пикселей, на которое будет осуществлена прокрутка при кручении колесика мыши

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

Более простое решение для плавной прокрутки, если вам не нужны навороты

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

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

Читайте также:  Как сбросить настройки ворд 2007 по умолчанию

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

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

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

auto – автоматический параметр который добавляет полосы прокрутки только по необходимости.

scroll – при выборе этого параметра добавляется прокрутка на постоянной основе.

visible – данный параметр задаёт видимость всего содержимого элемента.

hidden – параметр задаёт отображение только внутри области элемента.

Ссылка на основную публикацию
Как сбросить настройки через bios
На заре появления компьютерной техники большинство пользователей с опаской относились к такому техническому новшеству. В случае возникновения проблем всегда обращались...
Как привязать устройство к учетной записи microsoft
С выходом Юбилейного обновления для Windows 10 Microsoft представила много изменений и функций, включая способ упростить процесс активации системы. Хотя...
Как проверить гарнитуру на компьютере
Когда вы обнаруживаете что микрофон или наушники при разговоре не работают это вызывает раздражение и у вас и человека, с...
Как сбросить пароль dir 320
Автор: Мастер · Опубликовано 28.05.2012 · Обновлено 23.02.2019 Если необходимо взломать пароль д линк 320 (а также моделей д-линк 300,...
Adblock detector