Свойство scroll-padding-inline в CSS

Определение и использование

scroll-padding-inline свойство определяет расстояние от контейнера до положения прилипания элемента в направлении строки.

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

направление строки - это направление, в котором следующий символ будетplaced относительно существующих символов в строке. Это также способ布局 для элементов с CSS display: inline; (например, теги <a> и <strong>) в тексте. Направление строки зависит от языка письма, например, арабские новые символы排列аются справа налево, что делает направление строки справа налево, а на английских страницах направление строки слева направо. Направление строки можно определить с помощью свойства CSS direction и writing-mode определить.

позиция прилипания - это положение, в котором элемент吸附到容器中的位置， когда вы останавливаете скроллинг.

注意:эта свойство действует только в направлении строки,scroll-snap-align свойство действует только когда значение установлено в 'start' или 'end'.

свойство scroll-padding-inline является сокращением следующих свойств:

• scroll-padding-inline-start
• scroll-padding-inline-end

scroll-padding-inline значение свойства можно установить несколькими способами:

Если у свойства scroll-padding-inline два значения:

scroll-padding-inline: 10px 50px;

• расстояние от начала 10px
• расстояние от конца 50px

Если у свойства scroll-padding-inline есть значение:

scroll-padding-inline: 10px;

• расстояние от начала и конца 10px

чтобы увидеть scroll-padding-inline свойство на детализированном элементе, чтобы увидеть эффект scroll-snap-align свойство, и необходимо установить его на родительском элементе scroll-padding-inline и scroll-snap-type свойства.

свойства CSS scroll-padding-block и scroll-padding-inline свойства и свойства CSS Свойство scroll-padding-top в CSS、scroll-padding-bottom、scroll-padding-left и scroll-padding-right очень похожи, но scroll-padding-block и scroll-padding-inline Атрибут зависит от блочного направления и направления строки.

Пример

Пример 1

Установить отступы для скролла в направлении строки, от контейнера к привязке, равные 20px:

div {
  scroll-padding-inline: 20px;
}

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

Пример 2: галерея изображений

В галерее изображений с привязкой скролла можно использовать scroll-padding-inline Атрибут выталкивает изображение за фиксированный элемент:

#container {
  scroll-padding-inline: 30px 0;
}

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

Пример 3

Когда у контейнерного элемента writing-mode Когда значение атрибута установлено в 'vertical-rl', начальная позиция контейнера и его подэлементов в направлении строки смещается от левого края к верху, а конечная позиция смещается от правого края к низу. Это влияет на поведение привязки скролла и scroll-padding-inline Как работает атрибут:

#container {
  scroll-padding-inline: 20px 0;
  writing-mode: vertical-rl;
}

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

Пример 4

Когда у контейнерного элемента direction Когда значение атрибута установлено в 'rtl', начальная позиция контейнера и его подэлементов в направлении строки смещается от правого края к левому краю. Это влияет на поведение привязки скролла и scroll-padding-inline Как работает атрибут:

#container {
  scroll-padding-inline: 20px 0;
  direction: rtl;
}

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

CSS синтаксис

scroll-padding-inline: auto|value|initial|inherit;

Значение атрибута

Технические детали

Поддержка браузеров

Таблица содержит версии браузеров, которые полностью поддерживают этот атрибут.

相关页面

Ссылка:Свойство direction в CSS

Ссылка:Свойство scroll-snap-align в CSS

Ссылка:Свойство scroll-snap-type в CSS

Ссылка:Свойство writing-mode в CSS