Компоненты
Блокировка скрола
Лок страницы состоит из из следующих файлов: ios-checker.js, scroll-lock.js они обязательны для переноса в проект.
Из файла scroll-lock.js экспортируется класс
Так же у вас в проекте должно находится два утилитарных класса для блокировки страницы:
.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!