最後更新於 2024 年 7 月 26 日，由編輯部撰寫 | 審核：Syed Balkhi
何時在你的 WordPress 網站上的特定元素添加滾動條
為 WordPress 元素添加滾動條可以極大地改善網站的用戶體驗。但是，你應該什麼時候使用這個功能呢？
假設你運行一個時尚博客，有很多類別。你的主菜單可能有一個「服裝」下拉菜單，包含超過 20 個子類別。沒有滾動條，這個菜單可能會延伸到整個頁面，推擠其他內容。
如果你的側邊欄中有大量內容，有時很難選擇刪除哪一部分。為長篇側邊欄小工具添加滾動條可以解決這個問題。
其他使用場景包括產品頁面中的長而詳細的描述，包含數百條評論的評論區，或受限空間的圖片庫。
方法 1：使用 Thrive Architect 添加自定義滾動條（無需代碼）
一種方法是使用具有滾動條功能的頁面構建器來為特定元素添加滾動條。這樣，你可以輕鬆自定義滾動條而無需接觸任何代碼。為此，我們將使用 Thrive Architect。
首先，我們需要安裝 Thrive Architect 插件。可以通過登錄 Thrive Themes 網站的帳戶來訪問這個插件。接下來，下載並安裝 Thrive Product Manager 插件。
步驟 1：設置 Thrive Architect 和 Thrive Theme
安裝並激活插件後，導航至 WordPress 儀表板中的 Product Manager。點擊「Log into my account」以將你的 WordPress 網站與你的 Thrive Themes 帳戶鏈接。
步驟 2：向主題添加內容框元素
現在，讓我們向你的 WordPress 主題添加一個內容框元素，該元素默認具有滾動條功能。
步驟 3：在內容框中啟用滾動條
選擇該容器並點擊左側的藍色箭頭，你會看到許多自定義選項。滾動條的設置在「佈局和位置」標籤內。
方法 2：使用 CSS 代碼創建自定義滾動條
如果更改 WordPress 主題並使用頁面構建器來創建自定義滾動條感覺太過繁瑣，你可以使用 CSS 代碼。
首先，我們需要添加一個 CSS 類：scroll-bar。然後，將這個 CSS 類添加到我們想要更改的元素。
這是完整的 CSS 代碼片段：
.scroll-bar {
max-height: 100px;
width: 250px;
overflow-y: scroll;
overflow-x: hidden;
}
/* 自定義 Webkit 瀏覽器的垂直滾動條 */
.scroll-bar::-webkit-scrollbar {
width: 10px;
}
.scroll-bar::-webkit-scrollbar-track {
background: #eaeaea;
}
.scroll-bar::-webkit-scrollbar-thumb {
background: grey;
border-radius: 15px;
}
.scroll-bar::-webkit-scrollbar-thumb:hover {
background: black;
}
/* Firefox 自定義滾動條 */
.scroll-bar {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}然後，我們需要將 CSS 類添加到 WordPress 元素。完成後，添加 CSS 代碼到主題。
0 comments