如何在其他瀏覽器中建立沒有可見捲軸的可滾動 Div？-css教學-PHP中文網

如何在其他瀏覽器中建立沒有可見捲軸的可滾動 Div？

Patricia Arquette

發布： 2024-11-01 14:30:29

原創

361 人瀏覽過

How to Create Scrollable Divs Without Visible Scrollbars in Other Browsers?

在其他瀏覽器中創建不可見滾動條的可滾動Div

除了提供的Webkit 解決方案之外，在其他瀏覽器中也可以實現相同的效果透過使用巧妙的CSS 技術。具體方法如下：

CSS 解：

將可捲動div 包裹在另一個div 中：

<code class="html"><div id="outer-div">
  <div id="inner-div" style="overflow: auto;">
    <!-- Your scrollable content goes here -->
  </div>
</div></code>

登入後複製

在外部div上設定overflow:hidden以隱藏其捲軸：

<code class="css">#outer-div {
  overflow: hidden;
}</code>

登入後複製

在內部div上設定overflow:auto以允許滾動：

在內部div上設定overflow:auto以允許滾動：

<code class="css">#inner-div {
  overflow: auto;
}</code>

登入後複製

它是如何工作的：

通過將可滾動的div 包裹在外部div 中並使用Overflow:hidden ，你實際上將滾動條“捕獲”在外部div 中，使其不可見。內部 div 處理實際的滾動，同時受到外部 div 的限制。

範例：

在 https://jsfiddle.net/qqPcb 查看此範例/ 進行工作示範。

注意：

流行的 jQuery 插件 jScrollPane 也採用了此技術，它為隱藏滾動條提供了更全面的解決方案。

以上是如何在其他瀏覽器中建立沒有可見捲軸的可滾動 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！