CSS scroll-padding-inline-end 属性

Paglilinaw at Paggamit

scroll-padding-inline-end Ang attribute na ito ay nagtatalaga ng layo sa direksyon ng linya sa pagitan ng dulo ng konteyner at ang posisyon ng aling ng anak na elemento.

Ito nangangahulugan na kapag ito ay napatigil na gumagalaw, ang paggalaw ay mabilis na itataas at napapatigil sa takdang layo sa pagitan ng posisyon ng aling at konteyner.

Ang direksyon ng linya ay ang direksyon kung saan ang susunod na character ay ilalagay sa loob ng linya kumpara sa kasalukuyang character, ito rin ang paraan ng paglulugar ng mga tag na may CSS display: inline; (gaya ng <a> at <strong> tag) sa teksto. Ang direksyon ng linya ay depende sa wika ng pagsusulat, halimbawa, ang bagong character ng Arabic ay nilalagay sa kanan sa kaliwa, kaya ang direksyon ng linya ay mula kanan sa kaliwa, habang ang direksyon ng linya ng Ingles ay mula kaliwa sa kanan. Ang direksyon ng linya ay maaaring maiset sa pamamagitan ng CSS attribute direction 和 writing-mode Paglilinaw.

Ang posisyon ng aling ay ang lugar kung saan ang mga anak na elemento ay nakalinya sa loob ng konteyner kapag ito ay napatigil na gumagalaw.

Babala:Ang attribute na ito lamang ay ginagamit sa scroll-snap-align Ang attribute na ito ay gumagana lamang kapag ang direksyon ng linya ay i-set sa 'end'.

要看到 scroll-padding-inline-end 属性的效果，必须在子元素上设置 scroll-snap-align 属性，并在父元素上设置 scroll-padding-inline-end 和 scroll-snap-type 属性。

实例

例子 1

设置从容器末端到对齐位置的行内方向滚动内边距为 20px：

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

亲自试一试

例子 2：图片库

scroll-padding-inline-end 属性可以在具有对齐行为的图片画廊中使用，以将图片从固定元素后面推出：

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

亲自试一试

例子 3

当容器元素的 writing-mode 属性值设置为 'vertical-rl' 时，行内方向上容器和子元素的起始位置从左侧移动到顶部，而末端从右侧移动到底部。这会影响滚动对齐行为以及 scroll-padding-inline-end 属性的工作方式：

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

亲自试一试

例子 4

当容器元素的 direction 属性值设置为 'rtl' 时，行内方向上容器和子元素的末端从右侧移动到左侧。这会影响滚动对齐行为以及 scroll-padding-inline-end 属性的工作方式：

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

亲自试一试

CSS 语法

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

属性值

技术细节

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

相关页面

参考：CSS direction 属性

参考：CSS scroll-snap-align 属性

参考：CSS scroll-snap-type 属性

参考：CSS writing-mode 属性