Heim > Web-Frontend > CSS-Tutorial > Wie verstecke ich die Bildlaufleiste, während die Bildlauffunktion erhalten bleibt?

Wie verstecke ich die Bildlaufleiste, während die Bildlauffunktion erhalten bleibt?

Patricia Arquette
Freigeben: 2024-11-09 00:14:02
Original
750 Leute haben es durchsucht

How to Hide the Scrollbar While Keeping Scrolling Functionality?

Bildlaufleiste unter Beibehaltung der Bildlauffunktion ausblenden

Obwohl die Bildlaufleiste mithilfe von „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;
}
Nach dem Login kopieren
// 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";
Nach dem Login kopieren

Indem Sie die Bildlaufleiste mit CSS ausblenden und die Breite des Wrappers an die tatsächliche Inhaltsbreite anpassen, können Sie die Bildlauffunktion beibehalten über die Maus oder die 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.

Das obige ist der detaillierte Inhalt vonWie verstecke ich die Bildlaufleiste, während die Bildlauffunktion erhalten bleibt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage