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

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

ไวยากรณ์

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

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

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

<div>text</div>

div {
	scroll-behavior: auto;
	width: 4000px;
	height: 2000px;
	background-color: #C2DDFD;
}

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

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

<div>text</div>

div {
	scroll-behavior: smooth;
	width: 4000px;
	height: 2000px;
	background-color: #C2DDFD;
}

ดูเพิ่มเติม

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