CSS中隱藏滾動(dòng)條的同時(shí)保留滾動(dòng)功能

發(fā)布時(shí)間：2024-10-29 15:47:33 作者：OEC小胖胖

在CSS中,隱藏滾動(dòng)條同時(shí)保留滾動(dòng)功能可以通過(guò)設(shè)置overflow屬性和使用特定的CSS偽元素實(shí)現(xiàn),例如,使用::-webkit-scrollbar針對(duì)WebKit瀏覽器,-ms-overflow-style適用于IE和Edge,而scrollbar-width適用于Firefox

在CSS中，我們可以通過(guò)一些技巧來(lái)隱藏滾動(dòng)條，同時(shí)保留滾動(dòng)功能。以下是幾種常用的方法和具體的實(shí)現(xiàn)步驟。

1. 使用 overflow 和 ::-webkit-scrollbar

這種方法適用于大多數(shù)現(xiàn)代瀏覽器。通過(guò)設(shè)置 overflow 屬性啟用滾動(dòng)，同時(shí)利用 ::-webkit-scrollbar 來(lái)隱藏滾動(dòng)條（此偽元素只適用于 WebKit 內(nèi)核的瀏覽器，如 Chrome 和 Safari）。

實(shí)現(xiàn)步驟：

/* 隱藏滾動(dòng)條，啟用滾動(dòng) */
.scrollable {
  overflow: scroll; /* 或者 overflow: auto */
}
/* 針對(duì) WebKit 瀏覽器隱藏滾動(dòng)條 */
.scrollable::-webkit-scrollbar {
  display: none;
}

示例：

<div class="scrollable" style="width: 300px; height: 200px; overflow: scroll;">
  <p>這里有很多內(nèi)容，這段文本應(yīng)該會(huì)產(chǎn)生滾動(dòng)。</p>
  <p>這里有很多內(nèi)容，這段文本應(yīng)該會(huì)產(chǎn)生滾動(dòng)。</p>
  <p>這里有很多內(nèi)容，這段文本應(yīng)該會(huì)產(chǎn)生滾動(dòng)。</p>
</div>

2. 使用 -ms-overflow-style 和 scrollbar-width

這是另外一種方式，用于不同的瀏覽器。-ms-overflow-style 用于 Internet Explorer 和 Edge，scrollbar-width 用于 Firefox。

實(shí)現(xiàn)步驟：

/* 針對(duì) Internet Explorer 和舊版 Edge 隱藏滾動(dòng)條 */
.scrollable {
  overflow: auto;
  -ms-overflow-style: none;  /* 隱藏滾動(dòng)條 */
}
/* 針對(duì) Firefox 隱藏滾動(dòng)條 */
.scrollable {
  scrollbar-width: none; /* 隱藏滾動(dòng)條 */
}

示例：

<div class="scrollable" style="width: 300px; height: 200px; overflow: auto; -ms-overflow-style: none; scrollbar-width: none;">
  <p>這里有很多內(nèi)容，這段文本應(yīng)該會(huì)產(chǎn)生滾動(dòng)。</p>
  <p>這里有很多內(nèi)容，這段文本應(yīng)該會(huì)產(chǎn)生滾動(dòng)。</p>
  <p>這里有很多內(nèi)容，這段文本應(yīng)該會(huì)產(chǎn)生滾動(dòng)。</p>
</div>

3. 使用負(fù)邊距隱藏滾動(dòng)條

這種方法通過(guò)使用父容器并將子元素設(shè)置為超出邊界，以實(shí)現(xiàn)隱藏滾動(dòng)條。

實(shí)現(xiàn)步驟：

/* 父容器隱藏溢出 */
.parent {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}
/* 子元素正常滾動(dòng) */
.child {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  padding-right: 20px; /* 確保內(nèi)容沒(méi)有被完全隱藏 */
  margin-right: -20px; /* 隱藏滾動(dòng)條 */
}

示例：

<div class="parent">
  <div class="child">
    <p>這里有很多內(nèi)容，這段文本應(yīng)該會(huì)產(chǎn)生滾動(dòng)。</p>
    <p>這里有很多內(nèi)容，這段文本應(yīng)該會(huì)產(chǎn)生滾動(dòng)。</p>
    <p>這里有很多內(nèi)容，這段文本應(yīng)該會(huì)產(chǎn)生滾動(dòng)。</p>
  </div>
</div>

最常用的組合，確保主流瀏覽器兼容性：

為了確保在所有主流瀏覽器（如 Chrome、Safari、Firefox、Edge 和 IE）中隱藏滾動(dòng)條的同時(shí)仍然保留滾動(dòng)功能，可以結(jié)合前面提到的不同方法。以下是推薦的組合代碼：

/* 隱藏滾動(dòng)條的同時(shí)仍能滾動(dòng) */
.scroll-container {
    overflow: auto; /* 啟用滾動(dòng)功能 */
    -ms-overflow-style: none; /* 適用于 Internet Explorer 和舊版 Edge */
    scrollbar-width: none; /* 適用于 Firefox */
}
/* Webkit 瀏覽器 */
.scroll-container::-webkit-scrollbar {
    display: none; /* 隱藏滾動(dòng)條 */
}

解釋?zhuān)?/p>

overflow: auto;: 啟用滾動(dòng)功能，適用于所有瀏覽器。

-ms-overflow-style: none;: 隱藏 Internet Explorer 和舊版 Edge 瀏覽器中的滾動(dòng)條。

scrollbar-width: none;: 隱藏 Firefox 瀏覽器中的滾動(dòng)條。

::-webkit-scrollbar { display: none; }: 隱藏 WebKit 內(nèi)核瀏覽器（如 Chrome 和 Safari）中的滾動(dòng)條。

完整示例：

<div class="scroll-container" style="width: 300px; height: 200px;">
  <p>這里有很多內(nèi)容，這段文本應(yīng)該會(huì)產(chǎn)生滾動(dòng)。</p>
  <p>這里有很多內(nèi)容，這段文本應(yīng)該會(huì)產(chǎn)生滾動(dòng)。</p>
  <p>這里有很多內(nèi)容，這段文本應(yīng)該會(huì)產(chǎn)生滾動(dòng)。</p>
</div>

通過(guò)這個(gè)組合，滾動(dòng)條將會(huì)在所有主流瀏覽器中被隱藏，同時(shí)確保滾動(dòng)功能的正常使用。

到此這篇關(guān)于CSS中隱藏滾動(dòng)條的同時(shí)保留滾動(dòng)功能的文章就介紹到這了,更多相關(guān)css隱藏滾動(dòng)條保留滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！