CSS scroll-margin ทางค่า

การระบุและวิธีใช้

scroll-margin attribute นี้กำหนดระยะห่างระหว่างตำแหน่งที่เอาตัวเลือกและตัวแทน。

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

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

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

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

ถ้า scroll-margin มีค่าสี่ตัวเลข:

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

ถ้า scroll-margin มีค่าสามตัวเลข:

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

ถ้า scroll-margin มีค่าสองตัวเลข:

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

หากคุณสมบัติ scroll-margin มีค่าหนึ่ง：

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

เพื่อที่จะเห็น scroll-margin คุณสมบัติ ผลลัพธ์ของคุณสมบัติ ต้องกำหนดในตัวอักษรลูก scroll-margin และ scroll-snap-align คุณสมบัติ และกำหนดในตัวอักษรพ่อ scroll-snap-type คุณสมบัติ

แจ้งเตือน：ในตัวอย่างด้านล่างนี้ ทั้งหมดขอบหลังที่มีขอบหลังเพื่อที่จะเห็นผลลัพธ์ แต่เนื่องจาก scroll-snap-align คุณสมบัติได้ถูกตั้งค่าเป็น "start" ดังนั้นเพียงขอบหลังด้านบนที่เปลี่ยนแปลงความเป็นไปของการเลื่อน

ตัวอย่าง

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

กำหนดขอบหลังด้านบนขององค์ประกอบและขอบหลังด้านล่างของแท้งความเป็นที่ที่ 20px：

div {
  scroll-margin: 20px;
}

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

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

scroll-margin คุณสมบัตินี้สามารถใช้ในคลังภาพที่มีพฤติกรรมติดตายscroll-margin ทำให้ผู้ใช้สามารถเห็นภาพถ่ายที่มีอยู่ด้านซ้าย และยังอาจเห็นผลลัพธ์เมื่อเลื่อนภาพถ่ายแรก：

#container > img {
  scroll-margin: 0 0 0 30px;
}
กรุงปักกิ่ง บุคคลแสดงฟาง วุฒิญห์ ดอกลูกไม้แท้ ฮังโจว

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

ตัวอย่างที่ 3: กำหนดขอบหลังด้านล่างและข้างขวา

สามารถกำหนดที่มุมล่างและข้างขวาขององค์ประกอบ scroll-margin คุณสมบัติ。เลื่อนที่ระดับน้ำเงินและระดับตั้งแต่น้ำตาลเพื่อดูผลลัพธ์：

#container > div {
  scroll-margin: 0 10px 30px 0;
}





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

ระบบการใช้งาน CSS

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

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

ค่า รายละเอียด
0 ขอบหลังหลายๆมุมของการเลื่อนเท่า 0 ความยาว ค่าเริ่มต้น
length

กำหนดความเพิ่มของขอบหลังบนและข้างล่างของการเลื่อนที่มีหน่วยเมตรเท่ากับ px, pt, cm และเปิดใช้งานค่าลบ

ดูเพิ่มเติมที่：หน่วยทาง CSS。
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น ดูเพิ่มเติมที่ initial。
inherit มีความสามารถของตัวอักษรนี้จากตัวอักษรพ่อของมัน ดูเพิ่มเติมที่ inherit。

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

ค่าเริ่มต้น： 0
การติดตาม： ไม่
การออกแบบอนุการ์： ไม่สนับสนุน。อ่านเพิ่มเติมที่：คุณสมบัติที่เกี่ยวข้องกับอนุการ์。
รุ่น： CSS3
ระบบการใช้งาน JavaScript： object.style.scrollMargin="20px"

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

ตัวเลขในตารางนี้แสดงความเป็นส่วนหนึ่งในการสนับสนุนตัวอักษรที่มีความสามารถสนับสนุนคุณสมบัตินี้ในรุ่นฉบับแรก。

Chrome Edge Firefox Safari Opera
69.0 79.0 90.0 14.1 56.0

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

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

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

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

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

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

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