หากต้องการซ่อนแถบเลื่อนโดยใช้ CSS เราจะเข้าใจแนวทางต่างๆ แถบเลื่อนเป็นองค์ประกอบหลักของเว็บเบราว์เซอร์ที่ช่วยให้ผู้ใช้สามารถนำทางไปยังพื้นที่เนื้อหาที่มีขนาดใหญ่กว่าหน้าต่างที่รับชมได้ เราสามารถซ่อนแถบเลื่อนในขณะที่ยังคงฟังก์ชันการเลื่อนได้โดยใช้ 03 ทรัพย์สิน
ไวยากรณ์
selector {
overflow-x: value;
overflow-y: value;
}
/* Or shorthand */
selector {
overflow: value;
}
ค่าที่เป็นไปได้
13 เนื้อหาไม่ได้ถูกตัดออก อาจแสดงผลนอกองค์ประกอบ21 เนื้อหาถูกตัดและซ่อนแถบเลื่อน38 เนื้อหาถูกตัดออกแต่แถบเลื่อนจะมองเห็นได้เสมอ44 แถบเลื่อนจะปรากฏเฉพาะเมื่อมีเนื้อหาล้นออกมาเท่านั้น วิธีที่ 1:การซ่อนแถบเลื่อนแนวตั้ง
หากต้องการซ่อนแถบเลื่อนแนวตั้งในขณะที่เปิดใช้งานการเลื่อนแนวนอน ให้ตั้งค่า 58 และ 60
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 150px;
width: 300px;
overflow-y: hidden;
overflow-x: scroll;
border: 2px solid #333;
padding: 10px;
}
.content {
white-space: nowrap;
width: 500px;
background-color: #f0f8ff;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
This is a very long line of text that will extend beyond the container width and require horizontal scrolling to view completely.
</div>
<p>More content here that would normally cause vertical scrolling.</p>
<p>But the vertical scrollbar is hidden.</p>
</div>
</body>
</html>
A bordered container with horizontal scrollbar visible at the bottom, but no vertical scrollbar. The content extends horizontally and can be scrolled left/right.
วิธีที่ 2:การซ่อนแถบเลื่อนแนวนอน
หากต้องการซ่อนแถบเลื่อนแนวนอนในขณะที่เปิดใช้งานการเลื่อนแนวตั้ง ให้ตั้งค่า 73 และ 89
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 150px;
width: 300px;
overflow-x: hidden;
overflow-y: scroll;
border: 2px solid #333;
padding: 10px;
}
.content {
background-color: #fff3cd;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>This is paragraph one with normal text content.</p>
<p>This is paragraph two with more content.</p>
<p>This is paragraph three adding even more text.</p>
<p>This is paragraph four to create overflow.</p>
<p>This is paragraph five for vertical scrolling.</p>
</div>
</div>
</body>
</html>
A bordered container with vertical scrollbar visible on the right side, but no horizontal scrollbar. The content extends vertically and can be scrolled up/down.
วิธีที่ 3:ซ่อนแถบเลื่อนทั้งสอง
หากต้องการซ่อนแถบเลื่อนทั้งแนวนอนและแนวตั้งโดยสมบูรณ์ ให้ตั้งค่าทั้ง 93 และ 100 ถึง 111
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 150px;
width: 300px;
overflow: hidden;
border: 2px solid #333;
padding: 10px;
}
.content {
background-color: #d1ecf1;
width: 500px;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>This content extends both horizontally and vertically beyond the container boundaries.</p>
<p>However, no scrollbars are visible, so the overflowing content is simply clipped.</p>
<p>Users cannot scroll to see the hidden content.</p>
</div>
</div>
</body>
</html>
A bordered container with no visible scrollbars. Content that extends beyond the container boundaries is clipped and hidden from view.
บทสรุป
การซ่อนแถบเลื่อนโดยใช้ CSS 126 คุณสมบัติสร้างอินเทอร์เฟซที่สะอาดยิ่งขึ้น ใช้ 134 เพื่อซ่อนแถบเลื่อนทั้งหมด หรือเลือกควบคุมการเลื่อนแนวนอนและแนวตั้งด้วย 143 และ 152 คุณสมบัติ
