CSS scroll-padding รายละเอียด

การประกาศและการใช้งาน

scroll-padding attribute นี้กำหนดระยะทางจากคอนเทนเนอร์ถึงตำแหน่งที่เด็กไอเลมน์ติดตั้งเหนือ

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

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

scroll-padding attribute นี้เป็น attribute ย่อของ attribute ต่อไปนี้

scroll-padding ค่าของ属性 สามารถตั้งค่าด้วยวิธีต่าง ๆ

ถ้า scroll-padding มีค่าสี่ตัว

scroll-padding: 15px 30px 60px 90px;
  • ระยะห่างด้านบน 15px
  • ระยะห่างด้านขวา 30px
  • ระยะห่างด้านล่าง 60px
  • ระยะห่างด้านซ้าย 90px

ถ้า scroll-padding มีค่าสามตัว

scroll-padding: 15px 30px 60px;
  • ระยะห่างด้านบน 15px
  • ระยะทางด้านซ้ายและด้านขวา 30px
  • ระยะห่างด้านล่าง 60px

ถ้า scroll-padding มีค่าสองตัว

scroll-padding: 15px 30px;
  • ระยะห่างด้านบนและด้านล่าง 15px
  • ระยะทางด้านซ้ายและด้านขวา 30px

ถ้าคุณสมบัติ scroll-padding มีค่า

scroll-padding: 10px;
  • ระยะทางทั้งสี่ทิศทางที่เท่ากัน 10px

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

ประจักษ์:ในตัวอย่างด้านล่างนี้ ตั้งค่าระยะกลางการเลื่อนทั้งสี่ด้าน แต่เนื่องจาก scroll-snap-align ตั้งค่าเป็น "start" ดังนั้นเฉพาะระยะกลางด้านบนที่เปลี่ยนแปลงพฤติกรรมการเลื่อน

ตัวอย่าง

ตัวอย่าง 1

ตั้งค่าระยะกลางการเลื่อนจากองค์ประกอบถึงตำแหน่งที่ดึงติดเป็น 20px

div {
  scroll-padding: 20px;
}

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

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

scroll-padding คุณสมบัติสามารถใช้ได้ในภาพกลุ่มที่มีพฤติกรรมที่ดึงติดเพื่อหลุดภาพไปด้านล่างองค์ประกอบที่มีตำแหน่งบังคับ

#container {
  scroll-padding: 30px 0 0 0;
}
องค์ประกอบที่มีตำแหน่งบังคับ
กรุงปักกิ่ง เด็กแสดง หวหนอง ดอกทูลิป ฮังโจว

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

ตัวอย่าง 3: ตั้งค่าระยะกลางการเลื่อนที่ด้านล่างและด้านขวา

scroll-padding คุณสมบัติสามารถตั้งค่าได้ทั้งที่ด้านล่างและด้านขวาขององค์ประกอบ

#container {
  scroll-padding: 0 10px 30px 0;
}





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

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

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

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

ค่า รายละเอียด
auto ค่าเริ่มต้น
length

กำหนดหน่วยเมตรเมื่อเรียกใช้ px、pt、cm หรือตัวเลขอื่นๆ สำหรับระยะกลางการเลื่อน

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

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

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

การสนับสนุนโปรแกรมน่าที่ใช้

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

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

อ้างอิง：CSS scroll-padding-bottom รายละเอียด

อ้างอิง：CSS scroll-padding-left รายละเอียด

อ้างอิง：CSS scroll-padding-right รายละเอียด

อ้างอิง：CSS scroll-padding-top รายละเอียด

อ้างอิง：CSS scroll-snap-align รายละเอียด

อ้างอิง：CSS scroll-snap-type รายละเอียด