คุณสมบัติ scroll-behavior

คุณสมบัติ scroll-behavior กำหนดการเลื่อนที่ลื่นไหล หรือทันทีทันใดภายในองค์ประกอบ คุณสมบัตินี้รับค่าสองค่า คือ auto (การเปลี่ยนไปยังองค์ประกอบ แบบทันที) และ smooth (การเปลี่ยนแบบลื่นไหล)

ไวยากรณ์

cssตัวเลือก {
  scroll-behavior: auto หรือ smooth;
}

ตัวอย่าง . ค่า auto

มาเริ่มต้นด้วยการตั้งค่าการเลื่อนแบบทันที:

html<div>text</div>
cssdiv {
  scroll-behavior: auto;
  width: 4000px;
  height: 2000px;
  background-color: #C2DDFD;
}

Результат:

ตัวอย่าง . ค่า smooth

และตอนนี้มาลองตั้งค่าการเลื่อนแบบลื่นไหล:

html<div>text</div>
cssdiv {
  scroll-behavior: smooth;
  width: 4000px;
  height: 2000px;
  background-color: #C2DDFD;
}

Результат:

ดูเพิ่มเติม

  • คลาสเทียม :fullscreen,
    ซึ่งกำหนดสไตล์ให้กับองค์ประกอบในโหมดเต็มหน้าจอ
  • คลาสเทียม :default,
    ซึ่งกำหนดสไตล์เริ่มต้นให้กับองค์ประกอบ