วิธีการซ่อน scrollbar

เรียนรู้วิธีการใช้ CSS ซ่อน scrollbar

วิธีการซ่อน scrollbar

เพิ่ม overflow: hidden;เพื่อซ่อน scrollbar ทั้งตัวนอนและตัวตั้ง

ตัวอย่าง

body {
  overflow: hidden; /* ซ่อน scrollbar */
}

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

หากต้องการซ่อน scrollbar ตัวตั้งหรือตัวนอนเท่านั้น ใช้ overflow-y หรือ overflow-x:

ตัวอย่าง

body {
  overflow-y: hidden; /* ซ่อน scrollbar ตัวตั้ง */
  overflow-x: hidden; /* ซ่อน scrollbar ตัวนอน */
}

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

โปรด注意overflow:hidden จะลบความสามารถของ scrollbar ออกไปด้วย และไม่สามารถเลื่อนเว็บไซต์ได้ในหน้าเว็บ

ซ่อน scrollbar แต่ยังคงความสามารถ

เพื่อซ่อน scrollbar แต่ยังคงความสามารถในการเลื่อนต่อไปด้วยรหัสดังนี้:

ตัวอย่าง

/* ซ่อน scrollbar สำหรับ Chrome, Safari และ Opera */
.example::-webkit-scrollbar {
  display: none;
}
/* ซ่อน scrollbar สำหรับ IE, Edge และ Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

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

เว็บเบราเซอร์ Webkit (เช่น Chrome, Safari และ Opera) สนับสนุน standard ไม่ตามมาตราฐาน ::-webkit-scrollbar element โปรแกรมฉบับ ที่อนุญาตให้เราเปลี่ยนรูปแบบ scrollbar ของเว็บเบราเซอร์ IE และ Edge สนับสนุน -ms-overflow-style: รายละเอียดนี้ ที่ Firefox สนับสนุน scrollbar-width รายละเอียดนี้ ที่อนุญาตให้เราซ่อน scrollbar แต่ยังคงความสามารถของมัน

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

ตัวอย่าง:CSS 溢出

参考手册：CSS overflow 属性