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.