Hide scroll bar, but while still being able to scroll

Hiding scrollbars in CSS while still allowing content to scroll can be achieved through several methods. Here are the commonly used approaches:

Method 1: Using the overflow Property

This is the simplest method, which hides the scrollbar by setting the CSS overflow property. For example:

css
.container {
  overflow: hidden; /* Hide scrollbar */
}

This code hides the element's scrollbar, but if the content exceeds the container, users cannot scroll to view the remaining content. If you want to allow scrolling without displaying the scrollbar, you can use the following approach.

Method 2: Using ::-webkit-scrollbar

For users of Webkit browsers (such as Chrome and Safari), you can directly hide the scrollbar while still allowing scrolling:

css
.container::-webkit-scrollbar {
    display: none; /* Hide scrollbar */
}

This method only works for Webkit browsers and has no effect on Firefox or IE.

Method 3: Using an External Container

Another approach is to use two containers: an outer container to hide the scrollbar, and an inner container to hold the actual content. Here's an example:

html
<div class="outer-container">
    <div class="inner-container">
        <!-- Long content -->
    </div>
</div>

css
.outer-container {
  width: 300px; /* Or other fixed width */
  height: 200px; /* Or other fixed height */
  overflow: hidden;
}

.inner-container {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  padding-right: 17px; /* Adjust based on scrollbar width */
  box-sizing: content-box;
}

With this method, the overflow: hidden property of outer-container hides any potential scrollbar, while inner-container allows the content to scroll.

Summary

Each method has its use cases, and you can choose the most suitable one based on your specific requirements and compatibility. For instance, if cross-browser compatibility is essential, Method 3 may be the best choice. If you only care about Webkit browsers, Method 2 is the simplest solution.