Scrolling code in css

How TO — Smooth Scroll

Learn how to create a smooth scrolling effect with CSS.

Smooth Scrolling

Section 1

Click on the link to see the «smooth» scrolling effect.

Note: Remove the scroll-behavior property to remove smooth scrolling.

Section 2

Smooth Scrolling

Add scroll-behavior: smooth to the element to enable smooth scrolling for the whole page (note: it is also possible to add it to a specific element/scroll container):

Example

Browser Support

The numbers in the table specify the first browser version that fully supports the scroll-behavior property.

Cross-browser Solution

For browsers that do not support the scroll-behavior property, you could use JavaScript or a JavaScript library, like jQuery, to create a solution that will work for all browsers:

Example

// Make sure this.hash has a value before overriding default behavior
if (this.hash !== «») // Prevent default anchor click behavior
event.preventDefault();

// Store hash
var hash = this.hash;

// Using jQuery’s animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$(‘html, body’).animate( scrollTop: $(hash).offset().top
>, 800, function()

// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
>);
> // End if
>);
>);

Tip: Read more about the scroll-behavior property in our CSS Reference: CSS scroll-behavior Property.

Источник

How TO — Custom Scrollbar

Note: Custom scrollbars are not supported in Firefox or in Edge, prior version 79.

How To Create Custom Scrollbars

Chrome, Edge, Safari and Opera support the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser’s scrollbar.

The following example creates a thin (10px wide) scrollbar, which has a grey track/bar color and a dark-grey (#888) handle:

Example

/* width */
::-webkit-scrollbar width: 10px;
>

/* Track */
::-webkit-scrollbar-track background: #f1f1f1;
>

/* Handle */
::-webkit-scrollbar-thumb background: #888;
>

/* Handle on hover */
::-webkit-scrollbar-thumb:hover background: #555;
>

This example creates a scrollbar with box shadow:

Example

/* width */
::-webkit-scrollbar width: 20px;
>

/* Track */
::-webkit-scrollbar-track box-shadow: inset 0 0 5px grey;
border-radius: 10px;
>

/* Handle */
::-webkit-scrollbar-thumb background: red;
border-radius: 10px;
>

Scrollbar Selectors

For webkit browsers, you can use the following pseudo elements to customize the browser’s scrollbar:

• ::-webkit-scrollbar the scrollbar.
• ::-webkit-scrollbar-button the buttons on the scrollbar (arrows pointing upwards and downwards).
• ::-webkit-scrollbar-thumb the draggable scrolling handle.
• ::-webkit-scrollbar-track the track (progress bar) of the scrollbar.
• ::-webkit-scrollbar-track-piece the track (progress bar) NOT covered by the handle.
• ::-webkit-scrollbar-corner the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
• ::-webkit-resizer the draggable resizing handle that appears at the bottom corner of some elements.

Источник

Как создать скроллинг на своем сайте с помощью CSS?

Вы хотите создать эффекты параллакса и скроллинга на странице, но не знаете, с чего начать? Не нужно сразу обращаться к Javascript: есть более простые варианты. В этой статье мы расскажем, как все сделать при помощи СSS-кода. Также объясним, с какими браузерами эффекты работать не станут.

Если нужен плавный скроллинг

Чтобы создать простую прокрутку из одной части страницы в другую, нужно использовать CSS-свойство scroll-behavior. Вот его основные значения:

Так выглядит CSS-код на примере со вторым значением и условным селектором p:

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

Пример с HTML-кодом

Шаг 1. Создадим два блока с ссылками друг на друга:

 
 

Плавная прокрутка
 

 
Блок 1
 
Перейди по гиперссылке, чтобы увидеть плавный скроллинг.
 
Нажми сюда, чтобы перейти к Блоку 2.
 

 
Блок 2
 
Нажми сюда, чтобы перейти к Блоку 1.
 

Шаг 2. Добавим плавный скроллинг с помощью кода CSS внутри тега . Код состоит из cвойства scroll-behavior и значения smooth. Еще выберем цвета и высоту для разных частей с текстом: розовый и желтый.

Благодаря значению smooth удалось добиться плавного скроллинга на веб-странице.

Совместимость с браузерами

Свойство scroll-behavior работает почти со всеми популярными браузерами: Google Chrome, Firefox, Safari и Opera. Исключение — Internet Explorer и старые версии браузеров. Например, на Safari версии 15.2–15.3 свойство работать не станет.

Если нужен параллакс

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

Пример с HTML-кодом

В этом случае мы сделаем так, чтобы фоновая картинка вообще не двигалась во время скроллинга.

Шаг 1. Напишем код, в котором будет большой текстовый блок фиолетового цвета:

 
 

 

Прокрутите страницу дальше
 
 
 


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

Шаг 2. Рассмотрим код CSS. В нем будет ссылка на изображение, которая станет фоновым благодаря значению fixed в свойстве background-attachment.

В итоге получился параллакс на странице.

Примечание. Чтобы убрать этот эффект, достаточно вместо background-attachment: fixed указать в коде background-attachment: scroll. Изображение будет двигаться вместе с текстом:

Совместимость с браузерами

Свойство background-attachment работает с Google Chrome, Firefox, Opera, Internet Explorer и другими браузерами. Исключение — Safari, Android Browser и мобильная версия Opera.

Дополнительные примеры

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

Пример 1

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

Шаг 1. Напишем две строки следущим образом:

Шаг 2. Добавим CSS-код внутри тега . Сначала укажем параметры и выберем фон на бесплатном фотостоке для блока 2:

Шаг 3. Там же укажем параметры заголовков:

Шаг 4 . Определим параметры других элементов:

В итоге на сайте движутся три объекта. Перечислим их от самого медленного до самого быстрого:

Так выглядит многоуровневый скроллинг.

Пример 2

Рассмотрим, как зафиксировать какой-либо элемент на сайте во время прокрутки. Например, на сайте cloud.timeweb.com есть такой закрепленный блок:

Шаг 1 . Напишем код с двумя текстовыми блоками таким образом:

 

Зафиксированный элемент
 
 

 
 
Элемент 


 

Шаг 2. Напишем следующий CSS-код внутри тега :

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

Пример 3

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

Шаг 1. Создадим четыре строки текста таким образом:

Шаг 2 . Добавим CSS-код внутри тега . В коде обозначим размеры текстовых блоков и их цвета.

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

Заключение

Создание эффекта скроллинга — это несложный процесс. Только при помощи свойств CSS можно сделать так, чтобы пользователь видел необычные переходы между блоками сайта при прокрутке.

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

Источник