How to Hide Scrollbars While Still Allowing Scrolling?

Concealing Scrollbars While Maintaining Scrollability

This question explores the possibility of eliminating scrollbars without restricting the ability to scroll using the mouse or keyboard. As noted in a duplicate question, disabling the scrollbars also inhibits scrolling.

The attempted use of the CSS property overflow: hidden resulted in both scrollbar and scrolling deactivation. However, an alternative solution exists that retains scrolling functionality with hidden scrollbars.

This approach utilizes a wrapper division with the overflow:hidden style. To maintain the same width as the inner textarea, the width of the wrapper division is set to the textarea's scroll width minus the scrollbar width. This is achieved with JavaScript as follows:

// Determine the textarea width without scrollbar
var textareaWidth = document.getElementById("textarea").scrollWidth;

// Set the wrapper div width to the textarea width
document.getElementById("wrapper").style.width = textareaWidth + "px";

Additionally, this principle can be extended to create scrollable divs without scrollbars.

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