How to Hide Scrollbars While Still Allowing Mouse and Keyboard Scrolling?

Hiding Scrollbars while Maintaining Mouse/Keyboard Scrolling

This question has been marked as a duplicate, but the original thread did not adequately address the specific issue of hiding the scrollbar while still enabling scrolling with the mouse or keyboard.

Original Question:

Can I hide the scrollbar while still allowing scrolling with the mouse or keyboard?

CSS Overflow: Hidden Limitation:

The CSS property overflow: hidden can be used to hide the scrollbar, but it also disables scrolling functionality altogether.

jQuery Solution (Original):

The original thread proposed a jQuery solution that dynamically measures the textarea's width without the scrollbar and sets the wrapper div's width accordingly. This creates the illusion of a scrollable div without a visible scrollbar.

// get the width of the textarea minus scrollbar
var textareaWidth = document.getElementById("textarea").scrollWidth;

// width of our wrapper equals width of the inner part of the textarea
document.getElementById("wrapper").style.width = textareaWidth + "px";

JavaScript Solution (Without jQuery):

Alternatively, the same principle can be applied without jQuery:

document.getElementById("wrapper").style.overflow = "hidden";

// get the width of the textarea minus scrollbar
var textareaWidth = document.getElementById("textarea").scrollWidth;

// width of our wrapper equals width of the inner part of the textarea
document.getElementById("wrapper").style.width = textareaWidth + "px";

Update:

The same principle can be used to create scrollable divs without scrollbars using CSS and JavaScript.

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