แม่แบบ CSS: กำหนดความสูงคงที่พร้อมการเลื่อน
📝 การใช้งาน
แม่แบบนี้เหมาะสำหรับกรณีที่ต้องการจำกัดความสูงขององค์ประกอบ เช่น ข้อความยาว หรือรายการต่างๆ และให้สามารถเลื่อนได้ เหมาะกับการแสดงประวัติแชท บันทึก หรือการแจ้งเตือน
📘 คำอธิบาย
โดยการตั้งค่า max-height และกำหนด overflow: auto; จะช่วยให้เนื้อหาที่เกินขนาดความสูงสามารถเลื่อนได้ภายในองค์ประกอบ
✅ ตัวอย่าง
นี่คือพื้นที่ที่สามารถเลื่อนได้
เมื่อเพิ่มบรรทัดมากขึ้น แถบเลื่อนจะปรากฏโดยอัตโนมัติ
ตัวอย่าง: 1
ตัวอย่าง: 2
ตัวอย่าง: 3
ตัวอย่าง: 4
ตัวอย่าง: 5
ตัวอย่าง: 6
ตัวอย่าง: 7
📄 โค้ด (บางส่วน)
<style>
.scroll-box {
max-height: 150px;
overflow: auto;
border: 1px solid #ccc;
padding: 1rem;
background-color: #fafafa;
}
</style>
<div class="scroll-box">
<p>เนื้อหาที่สามารถเลื่อนได้</p>
</div>
📦 โค้ด (HTML ทั้งหมด)
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>ความสูงคงที่พร้อมการเลื่อน</title>
<style>
.scroll-box {
max-height: 150px;
overflow: auto;
border: 1px solid #ccc;
padding: 1rem;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="scroll-box">
<p>นี่คือพื้นที่ที่สามารถเลื่อนได้</p>
<p>เนื้อหาที่เพิ่มเข้ามาจะทำให้เกิดการเลื่อน</p>
<p>ตัวอย่าง: 1</p>
<p>ตัวอย่าง: 2</p>
<p>ตัวอย่าง: 3</p>
<p>ตัวอย่าง: 4</p>
</div>
</body>
</html>
🧩 การใช้งานและการประยุกต์ใช้
เทมเพลตกล่องเลื่อนนี้สามารถนำไปใช้ในสถานการณ์ต่าง ๆ ได้หลากหลาย โดยสามารถปรับค่า max-height เพื่อเปลี่ยนขนาดพื้นที่แสดงผลตามความเหมาะสม เช่น กำหนด max-height: 300px; สำหรับหน้าจอมือถือ หรือ max-height: 100px; สำหรับ UI ที่กะทัดรัด ช่วยให้ปรับใช้ได้อย่างยืดหยุ่นตามบริบท
📱 เคล็ดลับสำหรับการแสดงผลแบบ Responsive
เมื่อใช้งานร่วมกับ media query สามารถกำหนดความสูงให้เหมาะสมกับแต่ละอุปกรณ์ได้ เช่นการเขียน @media (max-width: 768px) { .scroll-box { max-height: 200px; } } จะช่วยปรับความสูงเมื่อแสดงผลบนสมาร์ทโฟน
🎨 การปรับแต่งดีไซน์
หากต้องการเปลี่ยนรูปลักษณ์ของแถบเลื่อน สามารถใช้ pseudo-element ::-webkit-scrollbar ได้ เช่น .scroll-box::-webkit-scrollbar { width: 8px; } เพื่อปรับความกว้างของแถบเลื่อน นอกจากนี้ยังสามารถปรับสีพื้นหลัง มุมโค้ง และอื่น ๆ ได้ตามต้องการ
ข้อควรระวัง: หากใช้ overflow: scroll; แทน overflow: auto; แถบเลื่อนจะแสดงเสมอแม้จะไม่มีเนื้อหามากนัก ดังนั้นควรเลือกใช้ให้เหมาะกับสถานการณ์
เทคนิคนี้สามารถประยุกต์ใช้กับองค์ประกอบต่าง ๆ เช่น เมนูด้านข้าง วิดเจ็ตแดชบอร์ด หรือข้อความยาวภายในกล่องป๊อปอัพ โดยเฉพาะอย่างยิ่งเมื่อพื้นที่แสดงผลมีจำกัดและต้องการนำเสนอเนื้อหาอย่างมีประสิทธิภาพ