Поведение при прокрутке

overscroll-behavior

В SIMAI Framework с помощью модификатора можно управлять поведением браузера при достижении границы области прокрутки.

Классы

Класс	Значение
`scroll-over-auto`	`overscroll-behavior: auto;`
`scroll-over-contain`	`overscroll-behavior: contain;`
`scroll-over-none`	`overscroll-behavior: none;`
`scroll-over-x-auto`	`overscroll-behavior-x: auto;`
`scroll-over-y-auto`	`overscroll-behavior-y: auto;`
`scroll-over-x-contain`	`overscroll-behavior-x: contain;`
`scroll-over-y-contain`	`overscroll-behavior-y: contain;`
`scroll-over-x-none`	`overscroll-behavior-x: none;`
`scroll-over-y-none`	`overscroll-behavior-y: none;`

Описание

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

Использование модификатора: {контрольная точка}:{модификатор}

Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
Модификатор. Обязательный параметр. Может принимать значения:
- scroll-over-auto - позволяет пользователю продолжить прокрутку родительской области прокрутки, когда они достигнут границы основной области прокрутки;
- scroll-over-contain - позволяет не запускать прокрутку в родительском элементе, но сохранять эффект «отскока» при прокрутке за конец контейнера в операционных системах, которые ее поддерживают;
- scroll-over-none - позволяет предотвратить запуск прокрутки в целевой области в родительском элементе, а также предотвратить эффекты «отскока» при прокрутке за конец контейнера;
- scroll-over-x-auto - по оси X позволяет пользователю продолжить прокрутку родительской области прокрутки, когда они достигнут границы основной области прокрутки;
- scroll-over-y-auto - по оси Y позволяет пользователю продолжить прокрутку родительской области прокрутки, когда они достигнут границы основной области прокрутки;
- scroll-over-x-contain - по оси X позволяет не запускать прокрутку в родительском элементе, но сохранять эффект «отскока» при прокрутке за конец контейнера в операционных системах, которые ее поддерживают;
- scroll-over-y-contain - по оси Y позволяет не запускать прокрутку в родительском элементе, но сохранять эффект «отскока» при прокрутке за конец контейнера в операционных системах, которые ее поддерживают;
- scroll-over-x-none - по оси X позволяет предотвратить запуск прокрутки в целевой области в родительском элементе, а также предотвратить эффекты «отскока» при прокрутке за конец контейнера;
- scroll-over-y-none - по оси Y позволяет предотвратить запуск прокрутки в целевой области в родительском элементе, а также предотвратить эффекты «отскока» при прокрутке за конец контейнера;

scroll-over-auto

С помощью модификатора scroll-over-auto позволяет пользователю продолжить прокрутку родительской области прокрутки, когда они достигнут границы основной области прокрутки.

Lorem ipsum dolor sit amet, conctetur adipiscing elit. Nam venenatis et lorem сидеть на колесе. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac roncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicleula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Аликвам консекват velit sed sem posuere, vitae sollicitudin mi conquat. Маурис эгет ipsum sed dui rutrum fringilla. Donec varius vehicleula magna sit amet auctor. Ut congue Vehicula Lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicleula felis.

<div class="scroll-over-auto h-d5 overflow-auto ... ">
    Lorem ipsum ...        
</div>

scroll-over-contain

С помощью модификатора scroll-over-contain позволяет не запускать прокрутку в родительском элементе, но сохранять эффект «отскока» при прокрутке за конец контейнера в операционных системах, которые ее поддерживают.

<div class="scroll-over-contain h-d5 overflow-auto ... ">
    Lorem ipsum ...        
</div>

scroll-over-none

С помощью модификатора scroll-over-none позволяет предотвратить запуск прокрутки в целевой области в родительском элементе, а также предотвратить эффекты «отскока» при прокрутке за конец контейнера.

<div class="scroll-over-none h-d5 overflow-auto ... ">
    Lorem ipsum ...        
</div>

scroll-over-x-auto

С помощью модификатора scroll-over-x-auto по оси X позволяет пользователю продолжить прокрутку родительской области прокрутки, когда они достигнут границы основной области прокрутки.

<div class="scroll-over-x-auto h-d5 overflow-auto ... ">
    Lorem ipsum ...        
</div>

scroll-over-y-auto

С помощью модификатора scroll-over-y-auto по оси Y позволяет пользователю продолжить прокрутку родительской области прокрутки, когда они достигнут границы основной области прокрутки.

<div class="scroll-over-y-auto h-d5 overflow-auto ... ">
    Lorem ipsum ...        
</div>

scroll-over-x-contain

С помощью модификатора scroll-over-x-contain по оси X позволяет не запускать прокрутку в родительском элементе, но сохранять эффект «отскока» при прокрутке за конец контейнера в операционных системах, которые ее поддерживают.

<div class="scroll-over-x-contain h-d5 overflow-auto ... ">
    Lorem ipsum ...        
</div>

scroll-over-y-contain

С помощью модификатора scroll-over-y-contain по оси Y позволяет не запускать прокрутку в родительском элементе, но сохранять эффект «отскока» при прокрутке за конец контейнера в операционных системах, которые ее поддерживают.

<div class="scroll-over-y-contain h-d5 overflow-auto ... ">
    Lorem ipsum ...        
</div>

scroll-over-x-none

С помощью модификатора scroll-over-x-none по оси X позволяет предотвратить запуск прокрутки в целевой области в родительском элементе, а также предотвратить эффекты «отскока» при прокрутке за конец контейнера.

<div class="scroll-over-x-none h-d5 overflow-auto ... ">
    Lorem ipsum ...        
</div>

scroll-over-y-none

С помощью модификатора scroll-over-y-none по оси Y позволяет предотвратить запуск прокрутки в целевой области в родительском элементе, а также предотвратить эффекты «отскока» при прокрутке за конец контейнера.

<div class="scroll-over-y-none h-d5 overflow-auto ... ">
    Lorem ipsum ...        
</div>

Изменить статью