วิธีการ - ซ่อนแถบเลื่อน
เรียนรู้วิธีซ่อนแถบเลื่อนด้วย CSS
วิธีซ่อนแถบเลื่อน
เพิ่มoverflow: hidden;
เพื่อซ่อนแถบเลื่อนแนวนอนและแนวตั้ง
ตัวอย่าง
body {
overflow: hidden; /* Hide scrollbars */
}
หากต้องการซ่อนเฉพาะแถบเลื่อนแนวตั้ง หรือเฉพาะแถบเลื่อนแนวนอน ให้ใช้overflow-y
หรือoverflow-x
:
ตัวอย่าง
body {
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
โปรดทราบว่าoverflow: hidden
จะเป็นการลบฟังก์ชันการทำงานของแถบเลื่อนด้วย ไม่สามารถเลื่อนดูภายในหน้าได้
เคล็ดลับ:หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ พร็อพเพอ ร์overflow
ตี้ ให้ไปที่CSS Overflow TutorialหรือCSS overflow Property Reference
ซ่อนแถบเลื่อนแต่คงการทำงานไว้
หากต้องการซ่อนแถบเลื่อน แต่ยังคงสามารถเลื่อนต่อไปได้ คุณสามารถใช้รหัสต่อไปนี้:
ตัวอย่าง
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar
for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /*
IE and Edge */
scrollbar-width: none; /* Firefox */
}
เบราว์เซอร์ Webkit เช่น Chrome, Safari และ Opera รองรับ::-webkit-scrollbar
องค์ประกอบเทียมที่ไม่ได้มาตรฐาน ซึ่งช่วยให้เราปรับเปลี่ยนรูปลักษณ์ของแถบเลื่อนของเบราว์เซอร์ได้ IE และ Edge รองรับ-ms-overflow-style:
คุณสมบัติ และ Firefox รองรับscrollbar-width
คุณสมบัติ ซึ่งช่วยให้เราซ่อนแถบเลื่อนได้ แต่ยังคงฟังก์ชันการทำงานไว้