【CSS】การแสดงผลการเลื่อนพื้นฐาน｜วิธีใช้ overflow-scroll

บทความนี้อธิบายการใช้คุณสมบัติ overflow-scroll ของ CSS เพื่อแสดงแถบเลื่อนเมื่อเนื้อหาล้นออกจากขอบเขต เป็นประโยชน์มากเมื่อคุณต้องการแสดงเนื้อหาภายในองค์ประกอบที่มีขนาดคงที่และอนุญาตให้มีการเลื่อน

🔹 ตัวอย่างโค้ด

<div class="container">
  <div class="content">เนื้อหาจะแสดงที่นี่ แถบเลื่อนจะปรากฏขึ้น</div>
</div>

<style>
.container {
  width: 100%;
  height: 150px;
  border: 2px dashed #000;
  overflow: scroll;
}
.content {
  height: 300px;
  background-color: #f0f0f0;
}
</style>

💻 โค้ดที่ทำงานได้ทั้งหมด (คัดลอกและวางเพื่อใช้งานทันที)

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>ตัวอย่างการเลื่อน</title>
  <style>
    .container {
      width: 100%;
      height: 150px;
      border: 2px dashed #000;
      overflow: scroll;
    }
    .content {
      height: 300px;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="content">เนื้อหาจะแสดงที่นี่ แถบเลื่อนจะปรากฏขึ้น</div>
  </div>
</body>
</html>

🧩 การใช้งานและกรณีศึกษา

overflow: scroll; ใช้เมื่อคุณต้องการแสดงแถบเลื่อนเมื่อเนื้อหาล้นจากองค์ประกอบหนึ่ง นี่เป็นวิธีที่ดีในการทำให้แน่ใจว่าผู้ใช้สามารถดูเนื้อหาทั้งหมดภายในองค์ประกอบที่มีขนาดคงที่

📱 การออกแบบที่รองรับการใช้งานบนอุปกรณ์ต่างๆ

ในการออกแบบที่รองรับการใช้งานบนอุปกรณ์ต่างๆ overflow: scroll; มักจะใช้เพื่อแสดงแถบเลื่อนในหน้าจอขนาดเล็ก เช่น สมาร์ทโฟนหรือแท็บเล็ต คุณยังสามารถใช้คำสั่ง @media เพื่อเปลี่ยนแปลงการแสดงผลตามขนาดหน้าจอที่แตกต่างกันได้

แถบเลื่อนมีประโยชน์มากโดยเฉพาะเมื่อคุณมีรายการยาวหรือเนื้อหาที่ซับซ้อน เพราะมันช่วยให้เนื้อหาพอดีกับพื้นที่ที่มีอยู่โดยไม่กระทบกับการจัดระเบียบขององค์ประกอบอื่นๆ

คัดลอกแล้ว!