CSS scroll-padding-bottom 属性

定義和用法

scroll-padding-bottom 屬性指定從容器底部到子元素吸附位置的距离。

吸附位置是指當你停止滾動時，子元素在容器中吸附到位的位置。吸附位置通過 scroll-snap-align 屬性設定，但也可能受到 CSS 屬性 direction และ writing-mode 影響。

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

ต้องตั้งค่า scroll-padding-bottom คุณสมบัติในตัวแทนลูกเพื่อเห็นผลที่มีผล scroll-snap-align คุณสมบัติ และตั้งค่า scroll-padding-bottom และ scroll-snap-type คุณสมบัตินี้

ตัวอย่าง

ตัวอย่างที่ 1

กำหนดการกระโดดจากด้านล่างของตัวแทนไปยังตำแหน่งที่จับที่ 20px：

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

ลองด้วยตัวเอง

ตัวอย่างที่ 2: คอนเทนเนอร์รูปภาพ

ในคอนเทนเนอร์ที่มีการจับตำแหน่งที่เฝ้าระวัง สามารถใช้ scroll-padding-bottom คุณสมบัตินี้จะขับพาหนะไปที่องค์ประกอบที่ติดตั้งแน่น

#container {
  scroll-padding-bottom: 30px;
}

ลองด้วยตัวเอง

ตัวอย่างที่ 3: กำหนดการกำหนดกรอบของการกระโดดทางล่าง

เมื่อกำหนดการจับตำแหน่งที่เฝ้าระวังในทั้งสองทิศทาง ยังสามารถกำหนดในตัวแทนตัวแบบที่มีการจับตำแหน่งที่เฝ้าระวังนี้ด้วย scroll-padding-bottom คุณสมบัตินี้ หลุดรอบลงไปในองค์ประกอบต่อไปเพื่อดูผลลัพธ์：

#container {
  scroll-padding-bottom: 30px;
}

ลองด้วยตัวเอง

ตัวอย่างที่ 4: ตำแหน่งที่จับ

เพื่อที่จะให้ scroll-padding-bottom คุณสมบัตินี้จะมีผล ตำแหน่งที่จับต้องตั้งในด้านล่างขององค์ประกอบลูก ในตัวอย่างนี้，writing-mode คุณสมบัติจะจับตำแหน่งจากด้านล่างขององค์ประกอบลูกเป็นด้านซ้าย ใช้รหัสนี้เมื่อ：scroll-padding-bottom คุณสมบัตินี้จะไม่มีผลต่อ：

#container {
  writing-mode: vertical-rl;
  scroll-padding-bottom: 30px;
}
#container > div {
  scroll-snap-align: end none;
}

ลองด้วยตัวเอง

CSS ภาษา

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

ค่าคุณสมบัติ

รายละเอียดเทคนิค

การสนับสนุนเบราเซอร์

ตัวเลขในตารางนี้แสดงความสามารถในการสนับสนุนของเบราเซอร์แบบรอบคอบแรกที่สนับสนุนคุณสมบัตินี้。

เพจที่เกี่ยวข้อง

อ้างอิง：CSS direction

อ้างอิง：CSS scroll-snap-align 属性

อ้างอิง：CSS scroll-snap-type 属性

อ้างอิง：CSS writing-mode คุณสมบัติ