[CSS] 隱藏可拖曳區域的 scrollbar(捲軸)

2022-02-03 19:43:29

在 CSS 裡如果當你使用 overflow: hidden 隱藏區塊的 scrollbar(捲軸)時，也會失去區塊的拖曳效果，如果想要保留拖曳的效果，只是視覺上的隱藏 scrollbar 的話，可以像這樣寫：

我們設定一個區塊 class name 為 area，並讓他出現卷軸。

 /* for Chrome, Safari and Opera */
.area::-webkit-scrollbar {
  display: none;
}

/* for IE, Edge and Firefox */
.area {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

在手機版本來就會隱藏卷軸，電腦版的話如果隱藏捲軸會因為沒東西可以拖曳，記得要再加上 drag 的事件才不會都看不到超過畫面的東西。

GA 與 GTM 抓不到瀏覽者資料的問題 [jQuery Plugin] dragScroll.js- 幫頁面上可捲動的區塊套上 drag/swipe 效果

你可能也會喜歡的

micron- 好用的 javascript 搭配 css 的微互動函式庫

[CSS3] 使用 font-face 讓頁面可以顯示使用者電腦沒有安裝的字型

[CSS] 隱藏可拖曳區域的 scrollbar(捲軸)

:nth Tester- 幫你檢查及測試 :nth-child() 使用是否符合需求的網站

CSS LAYOUT- 認識 UI 元件的常用名稱以及該如何用 CSS 切出來的簡單範例

透過 javascript(jQuery) 修改 CSS 變數的值

課程推薦

AI工作術全面學習實戰營：6 堂精選課程，學會最好用 AI 工具，翻轉你的人生

《PChome雜誌》攜手 5 位在 AI 領域的專業講師，打造上述 6 堂實用課程，教你學會時下最好用的 AI 工具，導入生成式 AI 來產製工作內容，改造並升級你的工作流程。

輸入折扣碼 ZERO2024 還可以額外獲得 NT$400 優惠喔。

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上，同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學，加上 ChatGPT 的輔助，您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗，還會大幅提高網站的搜索引擎排名，進而增加訪客流量和潛在客戶。