Zi 字媒體

SiteGround 3 折主機優惠 + WordPress 一鍵安裝完整教學 Hostinger 1.2 折主機優惠 + WordPress 一鍵安裝完整教學 1 分鐘閱讀 你是否想要在自己的 WordPress 當中，客製化側邊的滾動條？讓你的網站有別於其他網站，創造帶有你個人風格的網站樣式。 在今天的教學當中，將會教大家如何在 WordPress 當中輕鬆的實現自定義滾動條，有兩種解決方案可以讓我們快速的達成這個效果。你可以根據你的喜好，選擇其中一種方式實現。 目錄 隱藏 1 自定義滾動條顏色 2 利用外掛在 WordPress 中加入自定義滾動條 3 利用 CSS 在 WordPress 中自定義滾動條顏色 3.1 相關內容 3.2 猜你喜歡 自定義滾動條顏色 在預設的情況下，我們無法在 CSS 當中更改滾動條的屬性。雖然有一些方案可以讓我們達成我們想要的功能，但目前為止，大多數的瀏覽器都不支援，因此暫且不提。 為了解決這個既有問題，一般來說我們會使用特定瀏覽器的「偽元素」或是「JavaSciprt」來覆蓋原始的滾動條外觀。 以下將分別帶來「偽元素」與「JavaScript」兩種不同的技術。但是，由於在不同的瀏覽器與設備環境下，這些效果可能會有些許的不同。因此，在你完成後，請使用各種不同的瀏覽器與設備進行相容性測試，確保你的設定在所有環境下都能正常顯示。 LambdaTest – 瀏覽器相容性測試工具，檢測你的網站在所有平台裝置上的相容性 接著就讓我們來看看，到底該怎樣才能在 WordPress 中添加客製化的滾動條顏色。 方法一 利用外掛在 WordPress 中加入自定義滾動條 對於大多數的人來說，使用 WordPress 外掛式是較容易的方式。 Advanced scrollbar Author(s): 1infosoft Current Version: 1.0 Last Updated: 2019-06-28 advanced-scrollbar.zip 0%Ratings 300+Installs 3.0.1Requires 第一個 WordPress 外掛叫做「Advanced scrollbar」 ，安裝完成並啟用後，前往「設定」→「Custom Color scrollbar Settings」，或是直接由「Custom color scrollbar」進入此外掛的設定頁面。 Advanced scrollbar 設定畫面 在此外掛的設定頁面當中，你可以決定滾動條的顏色與背顏色，同時還可以改變滑鼠滾輪的滾動速度。 設定完成之後，可以看到現在網站的滾動條已經改變了。 自定義滾動條外觀結果 如果你想要建立一個免費 WordPress 網站來測試，可以參考我們之前的免費 WordPress 主機介紹。 CloudAccess Free WordPress Hosting – 免費 WordPress 虛擬主機申請與免費一鍵安裝 WordPress & Joomla 方法二 利用 CSS 在 WordPress 中自定義滾動條顏色 在網頁設計當中，我們可以直接使用 CSS 來設定滾動條的樣式。但注意，這個方式目前僅適用於 Google Chrome、Safari、Opera…等等，使用 WebKit 渲染引擎的瀏覽器，如果你在行動裝置上的瀏覽器，或在 Firefox 瀏覽器當中觀看，此效果有可能不會顯示。 你只需要將以下 CSS 程式加入你的 CSS 樣式當中。 CSS /* custom scrollbar by techmoon.xyz */ ::-webkit-scrollbar { -webkit-appearance: none; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: red; border:1px solid #ccc; } ::-webkit-scrollbar-thumb { background: blue; border:2px solid white; height:100px; border-radius:5px; } ::-webkit-scrollbar-thumb:hover { background: blue; } 你可以隨意的替換其中的顏色或是陰影等屬性。 根據你的 WordPress 佈景主題的不同，有些主題會提供自定義 CSS 的區塊，你就可以在後台編輯時，及時預覽滾動條的呈現效果： 使用 CSS 自定義滾動條樣式 希望今天的內容能夠幫助你了解如何在 WordPress 當中自定義滾動條的外觀。如果你希望看到更多好用的 WordPress 佈景主題，繼續閱讀我們的 WordPress 主題介紹。 如果你喜歡今天這篇教學文章，歡迎追蹤我們的 Facebook 與 Instagram。有任何問題歡迎在下方留言，我們會盡快回覆給你。 猜你喜歡 6 個實用的小技巧，告別 WordPress 網站速度變慢的問題，加速你的 WP 網站 2019 Hostinger 7 月 - 1 折 90% Off 購買註冊教學 + WordPress 安裝教學，一鍵 WordPress 快速安裝教學 如何在 WORDPRESS 中自動顯示 WEBP 圖片格式 [2019] 15 個 WordPress Newsletter 電子報訂閱外掛 WooCommerce 是什麼？WooCommerce 中文懶人包，免費利用 WooCommerce 外掛建立購物車系統 14 個最佳 WordPress Cache Plugins 緩存快取外掛推薦 - 2019 免費/付費通通有 如何修復在 WordPress 當中「503 Service Unavailable Error」的問題？ 如何快速在 WordPress 中啟用 GZIP 資料壓縮功能 DemosWP - 免費快速建立 WordPress 測試網站，提供 SSL、phpMyAdmin 與 SFTP 功能 WordPress 是什麼？新手入門教學 - 深入淺出帶你了解什麼是 WordPress 網站