CSS scroll-padding-block คุณสมบัติ

การใช้งานและการประกาศ

scroll-padding-block คุณสมบัตินี้กำหนดระยะทางจากสต๊อกไปยังตำแหน่งที่ติดตายขององค์ประกอบลูกในแนวบล็อค

นี่หมายความว่า เมื่อคุณหยุดเลื่อน การเลื่อนจะปรับเปลี่ยนรวดเร็วและหยุดอยู่ที่ระยะทางที่กำหนดระหว่างตำแหน่งที่ติดตายและสต๊อกในแนวบล็อค

แนวบล็อคหมายถึงการจัดลำดับของบรรทัดต่อไปในอักษรที่มีอยู่ในตอนนี้ เช่น <p> และ <div> ที่มี CSS display: block; หรือวิธีจัดลำดับบนหน้าเว็บ บล็อคแนวหลักขึ้นอยู่กับภาษาเขียน ตัวอย่างเช่น ภาษามองโกเลียจัดลำดับบรรทัดต่อไปจากซ้ายไปขวา ดังนั้นแนวบล็อคก็จัดลำดับจากซ้ายไปขวา ในหน้าเว็บภาษาอังกฤษมีแนวบล็อคลง writing-mode ที่นี้

ตำแหน่งที่ติดตายหรือติดตั้งเมื่อคุณหยุดเลื่อนคือตำแหน่งที่องค์ประกอบลูกจะติดตั้งในสต๊อกเมื่อคุณหยุดเลื่อน

จำเป็นต้องระวัง:คุณสมบัตินี้มีผลเฉพาะทางแนวบล็อคscroll-snap-align มีผลบวกเมื่อคุณสมบัติ 'start' หรือ 'end' ถูกกำหนด

scroll-padding-block คุณสมบัติเป็นคุณสมบัติย่อยของคุณสมบัติต่อไปนี้:

scroll-padding-block คุณสมบัติมีค่าสามารถกำหนดด้วยวิธีต่างๆ:

ถ้าคุณสมบัติ scroll-padding-block มีค่าสองค่า:

scroll-padding-block: 10px 50px;
  • ระยะทางจากทางเริ่มต้นเป็น 10px
  • ระยะทางจากทางสิ้นสุดเป็น 50px

ถ้าคุณสมบัติ scroll-padding-block มีค่า:

scroll-padding-block: 10px;
  • ระยะทางจากทางเริ่มต้นและทางสิ้นสุดทั้งหมดเป็น 10px

ต้องดู scroll-padding-block ผลลัพธ์ของคุณสมบัติต้องถูกกำหนดบนองค์ประกอบลูก scroll-snap-align 属性，并在父元素上设置 scroll-padding-block 和 scroll-snap-type 属性。

CSS 的 scroll-padding-block 和 scroll-padding-inline 属性与 CSS 属性 CSS scroll-padding-top คุณสมบัติ、scroll-padding-bottom、scroll-padding-left 和 scroll-padding-right 非常相似，但 scroll-padding-block 和 scroll-padding-inline 属性依赖于块方向和行内方向。

实例

例子 1

在块方向上，将滚动内边距设置为从容器到吸附位置的 20px：

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

亲自试一试

例子 2：图片库

scroll-padding-block 属性可以用于具有吸附行为的图片画廊，以将图片推到固定元素下方：

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

亲自试一试

例子 3

当容器元素的 writing-mode 属性值设置为 vertical-rl 时，块方向上容器和子元素的起始位置从顶部移动到右侧，结束位置从底部移动到左侧。这会影响滚动吸附行为以及 scroll-padding-block 属性的工作方式：

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

亲自试一试

CSS 语法

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

属性值

值 描述
auto 默认值。浏览器计算内边距。
length

以 px、pt、cm 等单位指定 scroll-padding-block。

不允许使用负值。请参阅：หน่วยมาตร CSS。
% 指定包含元素宽度百分比的内边距。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

默认值： auto
继承性： 否
动画制作： 不支持。请参阅：动画相关属性。
版本： CSS3
JavaScript 语法： object.style.scrollPaddingBlock="20px"

浏览器支持

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 15.0 56.0

หน้าที่เกี่ยวข้อง

อ้างอิง：CSS scroll-padding-block-end คุณสมบัติ

อ้างอิง：CSS scroll-padding-block-start คุณสมบัติ

อ้างอิง：CSS scroll-snap-align คุณสมบัติ

อ้างอิง：CSS scroll-snap-type คุณสมบัติ

อ้างอิง：CSS writing-mode รายการ