在其他瀏覽器中創建不可見滾動條的可滾動Div
除了提供的Webkit 解決方案之外,在其他瀏覽器中也可以實現相同的效果透過使用巧妙的CSS 技術。具體方法如下:
CSS 解:
<code class="html"><div id="outer-div"> <div id="inner-div" style="overflow: auto;"> <!-- Your scrollable content goes here --> </div> </div></code>
<code class="css">#outer-div { overflow: hidden; }</code>
<code class="css">#inner-div { overflow: auto; }</code>
它是如何工作的:
通過將可滾動的div 包裹在外部div 中並使用Overflow:hidden ,你實際上將滾動條“捕獲”在外部div 中,使其不可見。內部 div 處理實際的滾動,同時受到外部 div 的限制。
範例:在 https://jsfiddle.net/qqPcb 查看此範例/ 進行工作示範。
注意:流行的 jQuery 插件 jScrollPane 也採用了此技術,它為隱藏滾動條提供了更全面的解決方案。以上是如何在其他瀏覽器中建立沒有可見捲軸的可滾動 Div?的詳細內容。更多資訊請關注PHP中文網其他相關文章!