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:

1. Wrap your scrollable div within another div:

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

2. Set overflow: hidden on the outer div to hide its scrollbar:

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

3. Set overflow: auto on the inner div to allow scrolling:

<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!