Компоненты

Блокировка скрола

Скачать компонент

Лок страницы состоит из из следующих файлов: ios-checker.js, scroll-lock.js они обязательны для переноса в проект.

Из файла scroll-lock.js экспортируется класс , в файле создаётся экземпляр класса и записывается в глобальную область видимости window.scrollLock = new ScrollLock();

Так же у вас в проекте должно находится два утилитарных класса для блокировки страницы:

.scroll-lock-ios {
  position: fixed;

  overflow: hidden;
}

.scroll-lock {
  overflow: hidden;
}

На данной странице размещено фиксированное окно, в скрол лок добавлен функционал для компенсации отступа у фиксированных элементов при локе страницы. Для этого у фиксированного элемента должен быть дата атрибут data-fix-block. Компенсация отступа происходит за счёт добавления padding-right фиксированному блоку.

Будьте внимательны, не устанавливайте фиксированному блоку padding-right, так как он переопределяется в js.

Пример подключения

import '../components/scroll-lock/js/scroll-lock';

window.scrollLock.disableScrolling()

Блокирует скролл

window.scrollLock.enableScrolling()

Разблокирует скролл

Я фиксированное окно

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur quaerat numquam recusandae sunt. Quidem sunt, animi suscipit pariatur tempora iste a velit at. Iure autem dolorum beatae id iusto earum!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur quaerat numquam recusandae sunt. Quidem sunt, animi suscipit pariatur tempora iste a velit at. Iure autem dolorum beatae id iusto earum!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur quaerat numquam recusandae sunt. Quidem sunt, animi suscipit pariatur tempora iste a velit at. Iure autem dolorum beatae id iusto earum!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur quaerat numquam recusandae sunt. Quidem sunt, animi suscipit pariatur tempora iste a velit at. Iure autem dolorum beatae id iusto earum!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur quaerat numquam recusandae sunt. Quidem sunt, animi suscipit pariatur tempora iste a velit at. Iure autem dolorum beatae id iusto earum!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur quaerat numquam recusandae sunt. Quidem sunt, animi suscipit pariatur tempora iste a velit at. Iure autem dolorum beatae id iusto earum!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur quaerat numquam recusandae sunt. Quidem sunt, animi suscipit pariatur tempora iste a velit at. Iure autem dolorum beatae id iusto earum!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur quaerat numquam recusandae sunt. Quidem sunt, animi suscipit pariatur tempora iste a velit at. Iure autem dolorum beatae id iusto earum!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur quaerat numquam recusandae sunt. Quidem sunt, animi suscipit pariatur tempora iste a velit at. Iure autem dolorum beatae id iusto earum!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur quaerat numquam recusandae sunt. Quidem sunt, animi suscipit pariatur tempora iste a velit at. Iure autem dolorum beatae id iusto earum!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur quaerat numquam recusandae sunt. Quidem sunt, animi suscipit pariatur tempora iste a velit at. Iure autem dolorum beatae id iusto earum!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur quaerat numquam recusandae sunt. Quidem sunt, animi suscipit pariatur tempora iste a velit at. Iure autem dolorum beatae id iusto earum!