CSS scroll-padding-inline-end 属性

การกำหนดและการใช้งาน

scroll-padding-inline-end คุณสมบัตินี้กำหนดระยะทางในทิศทางการจัดลำดับในแถวระหว่างจุดสุดท้ายของตัวแทนและตำแหน่งการจัดตัวของอุปกรณ์ย่อย

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

การจัดลำดับในแถวเรียกว่า การจัดลำดับของอักษรต่อไปเมื่อเทียบกับอักษรที่มีอยู่ในแถว ก็คือวิธีการจัดลำดับของแท็กซ์ที่มี CSS display: inline; (เช่นแท็กซ์ <a> และ <strong>) ในข้อความ การจัดลำดับในแถวขึ้นอยู่กับภาษาการเขียน ตัวอย่างเช่น ภาษาอาหรับที่จัดลำดับตัวอักษรในแถวที่จากซ้ายไปขวา ดังนั้นการจัดลำดับในแถวจึงจะเป็นซ้ายไปขวา ในหน้าที่ใช้ภาษาอังกฤษ การจัดลำดับในแถวจึงจะเป็นซ้ายไปขวา การจัดลำดับในแถวสามารถกำหนดได้โดย CSS 属性 direction และ writing-mode การกำหนด

ตำแหน่งการจัดตัวเรียกว่า ตำแหน่งที่อุปกรณ์ย่อยจะตั้งตัวตรงตามตำแหน่งในตัวแทนของตัวที่หยุดหมุน

เรียกร้อง注意：คุณสมบัตินี้ใช้เมื่อ scroll-snap-align คุณสมบัติที่เปิดใช้เมื่อการจัดลำดับในแถวจัดเรียงเป็น '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 ทิศทาง

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

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

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