Bildlaufleiste ausblenden unter Beibehaltung der Bildlauffunktion

Obwohl die Bildlaufleiste mit „overflow:hidden“ deaktiviert wurde, ging die Bildlauffunktion verloren. Um dieses Problem zu beheben, gibt es eine alternative Lösung, die einen CSS-Wrapper mit JavaScript-Berechnungen kombiniert.

JavaScript- und CSS-Lösung

Verwenden Sie den folgenden CSS- und 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";

Indem Sie die Bildlaufleiste mit CSS ausblenden und die Breite des Wrappers an die tatsächliche Inhaltsbreite anpassen, können Sie die Bildlauffunktion über die Maus beibehalten oder Tastatur.

Zusätzliche Technik

Um ein scrollbares Div ohne sichtbare Bildlaufleiste zu erstellen, verwenden Sie dasselbe Prinzip. Fügen Sie einfach das overflow-y: scroll; Eigenschaft zum inneren Element.