下拉翻頁是現代網站常用的功能之一，它可以大大提高用戶訪問網站的便捷性和速度。下面我們將介紹一種基于CSS的下拉翻頁代碼。

// CSS代碼
#container {
max-height: 300px;
overflow: auto;
}
#container::-webkit-scrollbar {
width: 5px;
}
#container::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 10px;
}
#footer {
position: relative;
height: 40px;
margin-top: -40px;
clear: both;
text-align: center;
}
#loading-spinner {
display: none; // 初始狀態為隱藏
position: absolute;
top: 5px;
right: 10px;
width: 30px;
height: 30px;
border: 3px solid rgba(0, 150, 255, 0.2); // 設置半透明邊框
border-radius: 50%;
border-left-color: rgba(0, 150, 255, 1); // 指定邊框顏色
animation: spin 1s linear infinite; // 添加旋轉動畫效果
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

上述代碼中，我們使用了CSS的overflow屬性來實現滾動條的出現和隱藏。同時，我們還使用了webkit-scrollbar偽元素來設置滾動條的樣式，添加了loading-spinner元素并設置它的樣式和動畫效果，實現了下拉翻頁功能。

通過上述代碼，我們可以利用CSS輕松地實現下拉翻頁功能，為用戶提供更好的瀏覽體驗。