Home > Article > Web Front-end > How to Create Scrollable Divs Without Visible Scrollbars in Other Browsers?
Creating Scrollable Divs Without Visible Scrollbars in Other Browsers
In addition to the Webkit solution provided, you can achieve the same effect in other browsers by using a clever CSS technique. Here's how:
CSS Solution:
<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>
How it Works:
By wrapping the scrollable div within the outer div with overflow: hidden, you essentially "trap" the scrollbar within the outer div, making it invisible. The inner div handles the actual scrolling while being constrained by the outer div's limitations.
Example:
Check out this example at https://jsfiddle.net/qqPcb/ for a working demonstration.
Note:
This technique is also employed by the popular jQuery plugin, jScrollPane, which provides a more comprehensive solution for hiding scrollbars.
The above is the detailed content of How to Create Scrollable Divs Without Visible Scrollbars in Other Browsers?. For more information, please follow other related articles on the PHP Chinese website!