要制作響應式的 HTML 滾動條，可以使用 CSS 樣式來自定義滾動條的外觀和行為。以下是一個簡單的示例：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<div class="content">
<!-- 內容 -->
</div>
</div>
</body>
</html>
.container {
width: 100%;
height: 100vh;
overflow: auto;
}
.content {
width: 100%;
height: 2000px; /* 設置內容高度 */
}
/* 自定義滾動條樣式 */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
在上面的示例中，.container 元素設置了 overflow: auto; 屬性，這樣當內容超出容器高度時會出現滾動條。同時，使用了 CSS 的偽元素 ::-webkit-scrollbar 來自定義滾動條的樣式，包括寬度、背景色和懸停效果。
通過以上方法，您可以制作出響應式的 HTML 滾動條，根據需要自定義樣式來適應您的設計需求。
