How to Hide the Scrollbar While Keeping Scrolling Functionality?

Hide Scrollbar While Maintaining Scrolling Capability

Despite disabling the scrollbar using overflow: hidden, the scrolling functionality was lost. To address this issue, an alternative solution exists that combines a CSS wrapper with JavaScript calculations.

JavaScript and CSS Solution

Utilize the following CSS and JavaScript code:

#wrapper {
  overflow: hidden;
}

// Calculate the width of the element excluding the scrollbar
var elementWidth = document.getElementById("element").scrollWidth;

// Set the wrapper width to match the element width
document.getElementById("wrapper").style.width = elementWidth + "px";

By hiding the scrollbar with CSS and adjusting the wrapper's width to match the actual content width, you can retain scrolling functionality via the mouse or keyboard.

Additional Technique

For creating a scrollable div without a visible scrollbar, employ the same principle. Simply add the overflow-y: scroll; property to the inner element.

The above is the detailed content of How to Hide the Scrollbar While Keeping Scrolling Functionality?. For more information, please follow other related articles on the PHP Chinese website!