CSS scroll-margin-inline-end พื้นที่เลื่อนด้านขวา

คำนิยามและวิธีใช้

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

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

การจัดลำดับตามแนวทางเลื่อนของตัวอักษรต่อไปเมื่อเทียบกับตัวอักษรที่มีอยู่ในบรรยาย ครับ นี่เป็นรูปแบบการจัดลำดับของแท็กมี CSS display: inline; (เช่นแท็ก <a> และ <strong>) ในข้อความ การจัดลำดับตามแนวทางเลื่อนของตัวอักษรขึ้นอยู่กับภาษาการเขียน เช่น ภาษาอาหรับมีการจัดลำดับตัวอักษรตามทิศทางซ้ายไปขวา ดังนั้น การจัดลำดับตามแนวทางเลื่อนของตัวอักษรจึงเป็นทิศทางซ้ายไปขวา ในหน้าที่มีภาษาอังกฤษ การจัดลำดับตามแนวทางเลื่อนของตัวอักษรจึงเป็นทิศทางซ้ายไปขวา การจัดลำดับตามแนวทางเลื่อนของตัวอักษรสามารถกำหนดได้ด้วยคุณสมบัติ CSS direction scroll-margin-block ตัวอย่าง 2 คำนิยาม

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

注意：注意： scroll-margin-inline-end คุณสมบัตินี้มีผลเมื่อตั้งค่าในทิศทางแถวภายในเท่านั้น。

คุณสมบัติเป็น 'end' มีผล。 คุณสมบัติในองค์ประกอบลูก ต้องตั้งค่า เพื่อที่จะเห็น คุณสมบัติในองค์ประกอบลูก ต้องตั้งค่า scroll-margin-block scroll-margin-inline-end scroll-snap-align คุณสมบัติ，และตั้งค่า scroll-snap-type

คุณสมบัติ。 scroll-margin-inline scroll-margin-block มีความคล้ายคลึงกันมาก แต่ CSS CSS scroll-margin-top พื้นที่เลื่อนด้านบนscroll-margin-bottomคุณสมบัติเป็นคุณสมบัติของ CSSscroll-margin-bottom、 scroll-margin-block scroll-margin-left scroll-margin-right มีความคล้ายคลึงกันมาก แต่ scroll-margin-block scroll-margin-inline และ

คุณสมบัตินี้ขึ้นอยู่กับทิศทางแบบบล็อคและทิศทางแถวภายใน。

ตัวอย่าง

ตัวอย่าง 1

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

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

ตั้งระยะทางที่องค์ประกอบภายในแถวภายนอกจากตำแหน่งที่เกาะตัวไปยังองค์ประกอบที่สามารถเลื่อนได้：

เมื่อ <div> องค์ประกอบ ตัวอย่าง 2 writing-mode

div {
  scroll-margin-inline-end: 20px;
  เมื่อค่าของคุณสมบัติ vertical-rl จะทำให้ทิศทางในแถวภายในเป็นทิศทางลงมา。ผลลัพธ์คือปลายขององค์ประกอบจะเคลื่อนย้ายจากด้านขวาไปที่ด้านล่าง：
}

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

ตัวอย่าง 3

เมื่อ <div> องค์ประกอบ direction เมื่อค่าของคุณสมบัติ rtl จะทำให้ทิศทางในแถวภายในเป็นทิศทางจากขวาไปที่ซ้าย。ผลลัพธ์คือปลายขององค์ประกอบจะเคลื่อนย้ายจากด้านขวาไปที่ด้านซ้าย：

div {
  scroll-margin-inline-end: 20px;
  direction: rtl;
}

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

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

scroll-margin-inline-end: 0|value|initial|inherit;

ค่าของคุณสมบัติ

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

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

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

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

อ้างอิง：CSS ทิศทาง

อ้างอิง：CSS scroll-snap-align พฤติกรรมการตั้งตำแหน่งการยกเลื่อน

อ้างอิง：CSS scroll-snap-type ประเภทการยกเลื่อน

อ้างอิง：CSS writing-mode thuộc tính