CSS scroll-padding-block-end 属性

การรับรู้และการใช้งาน

scroll-padding-block-end ตัวแปรนี้กำหนดระยะทางระหว่างปลายตัวเครื่องงานถึงตำแหน่งเกาะขององค์ประกอบในแนวบล็อค

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

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

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

ประกาศ:คุณสมบัตินี้มีผลเมื่อมีการเคลื่อนย้ายในทิศทางบล็อค scroll-snap-align คุณสมบัติมีค่า 'end' ถึงจะมีผล

เพื่อที่จะเห็น scroll-padding-block-end คุณสมบัติ scroll-snap-align คุณสมบัติ scroll-padding-block-end และ scroll-snap-type คุณสมบัติ

ตัวอย่าง

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

ตั้งค่าเปอร์เซ็นต์ของการเคลื่อนย้ายด้านบล็อคของระยะทางจากปลายของโครงการไปยังตำแหน่งติดตายเป็น 20px:

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

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

ตัวอย่างที่ 2: คลังภาพ

ในแกลลอรี่ภาพที่มีการติดตาย scroll-padding-block-end คุณสมบัติจะบีบภาพที่มีความยาวเหลืองเสร็จที่ตำแหน่งองค์ประกอบที่ติดตาย

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

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

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

เมื่อองค์ประกอบของตัวแทน: writing-mode เมื่อคุณสมบัติมีค่าเป็น vertical-rl ตัวองค์ประกอบของโครงการจะเคลื่อนย้ายจากด้านล่างไปทางซ้ายในทิศทางของบล็อค ซึ่งจะทำให้มีผลต่อการติดตายของการเคลื่อนย้าย scroll-padding-block-end วิธีที่คุณสมบัติทำงาน:

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

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

ระบบการเขียน CSS

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

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

ค่า คำอธิบาย
auto ค่าเริ่มต้น
length

กำหนดด้วยหน่วยเมตรความยาว px, pt, cm สำหรับ scroll-padding-block-end

ไม่อนุญาตให้ใช้ค่าลบ ดูข้อมูลที่:หน่วยมาตร CSS.
% กำหนดเป็นเปอร์เซ็นต์ของความกว้างขององค์ประกอบที่รวม
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น ดูข้อมูลที่: initial.
inherit มีความหมายว่ารับมาจากตัวปลายทางขององค์ประกอบพ่อของมัน ดูข้อมูลที่: inherit.

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

ค่าเริ่มต้น: auto
การสืบทอด: ไม่
การสร้างอนุการ์: ไม่สนับสนุน。ดูข้อมูลที่:คุณสมบัติที่เกี่ยวกับอนุการ์.
รุ่น: CSS3
ระบบการเขียน JavaScript: object.style.scrollPaddingBlockEnd="20px"

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

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 15.0 56.0

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

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

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

อ้างอิง：CSS writing-mode ทางนิยาย