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

定义和用法

scroll-padding-left 属性指定从容器左侧到子元素吸附位置的距离。

吸附位置是指在停止滚动时，子元素在容器中吸附到位的位置。

ตำแหน่งการบวมถูกกำหนดโดย scroll-snap-align คุณสมบัติการตั้งค่า แต่อาจได้รับอิทธิพลจากคุณสมบัติ CSS direction และ writing-mode ที่มีผล

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

เพื่อเห็น scroll-padding-left ควรตั้งค่าที่องค์ประกอบลูก scroll-snap-align คุณสมบัติ，และต้องการมีผลของคุณสมบัติ scroll-padding-left และ scroll-snap-type คุณสมบัติ。

ตัวอย่าง

ตัวอย่าง 1

ตั้งค่ารอบช่องในการเลื่อนแบบนอร์ทวีสต์จากด้านซ้ายของตัวแทนสำหรับ 20px:

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

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

ตัวอย่าง 2: หอสมุดรูปภาพ

scroll-padding-left คุณสมบัตินี้สามารถใช้กับกลุ่มรูปภาพที่มีการถูกมุ่งมั่นเพื่อบดทุกของภาพออกมาเข้าในช่องที่มีองค์ประกอบที่ถูกกำหนดที่ฝั่งขวาของภาพ:

#container > img {
  scroll-padding-left: 30px;
}

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

ตัวอย่าง 3: ตั้งค่ารอบช่องในด้านซ้าย

เมื่อมีการตั้งค่าการถูกมุ่งมั่นทั้งสองทางทั้งนี้ scroll-padding-left คุณสมบัติ。เลื่อนเรียงแบบนอร์ทวีสต์ที่รอบด้านถัดไปเพื่อดูผลลัพธ์:

#container > div {
  scroll-padding-left: 30px;
}

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

ตัวอย่าง 4: ตำแหน่งที่ถูกมุ่งมั่น

เพื่อให้ scroll-padding-left คุณสมบัติมีผลงาน，ตำแหน่งที่ถูกมุ่งมั่นจะต้องถูกกำหนดที่ด้านซ้ายขององค์ประกอบลูก。ในตัวอย่างนี้direction ค่าของคุณสมบัติ 'rtl' จะเปลี่ยนตำแหน่งที่ถูกมุ่งมั่นจากด้านซ้ายขององค์ประกอบลูกมาเป็นด้านขวา。เมื่อใช้โค้ดนี้scroll-padding-left คุณสมบัติจะไม่มีผลต่อ:

#container {
  direction: rtl;
  scroll-padding-left: 30px;
}
#container > div {
  scroll-snap-align: none start;
}

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

การเขียน CSS

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

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

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

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

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

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

อ้างอิง：CSS แนวทาง

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

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

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