Bildlaufleiste verstecktes CSS

Beim Erstellen von Webseiten sind Bildlaufleisten ein unvermeidliches Designelement. Manchmal beeinträchtigt das Erscheinen von Bildlaufleisten jedoch das Design der gesamten Seite. In diesem Fall müssen wir einige Tricks anwenden, um die Bildlaufleisten auszublenden.

CSS bietet verschiedene Methoden zum Ausblenden von Bildlaufleisten. Wir werden sie im Folgenden einzeln vorstellen.

1. Verwenden Sie das Überlaufattribut

In CSS können wir das Überlaufattribut verwenden, um zu steuern, ob der Inhalt eines Elements seinen Container überlaufen soll. Wenn das Überlaufattribut auf „Ausgeblendet“ gesetzt ist, wird der Elementinhalt abgeschnitten, wodurch die Bildlaufleiste ausgeblendet werden kann. Das Folgende ist der Beispielcode:

body{
  overflow: hidden;
}

Der obige Code blendet die Bildlaufleiste der gesamten Seite aus. Wenn Sie nur die Bildlaufleiste eines bestimmten Elements ausblenden möchten, finden Sie den CSS-Selektor von das Element und fügen Sie das Überlaufattribut hinzu.

#container{
  overflow: hidden;
}

2. Webkit-Stile verwenden

Webkit ist eine CSS-Engine, die die meisten modernen Browser unterstützt, einschließlich Chrome und Safari. Hier sind einige Möglichkeiten, Bildlaufleisten mithilfe von Webkit-Stilen auszublenden:

1. Vertikale Bildlaufleiste ausblenden:

::-webkit-scrollbar{
  width: 0px;
}

Der obige Code blendet die vertikale Bildlaufleiste aus, weil Die Breite der vertikalen Bildlaufleiste beträgt standardmäßig 17 Pixel.

2. Horizontale Bildlaufleiste ausblenden:

::-webkit-scrollbar{
  height: 0px;
}

In ähnlicher Weise blendet der obige Code die horizontale Bildlaufleiste aus, da die horizontale Bildlaufleiste standardmäßig die gleiche Höhe hat auch 17px.

3. Alle Bildlaufleisten ausblenden:

::-webkit-scrollbar{
  display: none;
}

Der obige Code blendet alle Bildlaufleisten vollständig aus.

3. Verwenden Sie jQuery

Wenn Sie jQuery verwenden, können Sie damit auch die Bildlaufleiste ausblenden. Hier sind einige Möglichkeiten, die Bildlaufleiste mit jQuery auszublenden:

1. Die vertikale Bildlaufleiste ausblenden:

$(document).ready(function(){
  $('body').css('overflow-y', 'hidden');
});

Nach Verwendung des obigen Codes wird die Seite The Die vertikale Bildlaufleiste wird ausgeblendet.

2. Die horizontale Bildlaufleiste ausblenden:

$(document).ready(function(){
  $('body').css('overflow-x', 'hidden');
});

Der obige Code blendet die horizontale Bildlaufleiste aus.

4. Verwenden Sie JavaScript

Wenn Sie natives JavaScript verwenden möchten, um die Bildlaufleiste auszublenden, finden Sie hier einige Methoden, die Sie verwenden können:

# 🎜 🎜#Vertikale Bildlaufleiste ausblenden:

1. document.getElementsByTagName("body")[0].style.overflowY = "hidden";

Der obige Code blendet die vertikale Bildlaufleiste aus.

Die horizontale Bildlaufleiste ausblenden:

2. document.getElementsByTagName("body")[0].style.overflowX = "hidden";

Der obige Code blendet die horizontale Bildlaufleiste aus.

Zusammenfassend sind die oben genannten einige gängige Methoden zum Ausblenden von Bildlaufleisten. Je nach Bedarf können Sie eine oder mehrere dieser Methoden wählen. Es ist jedoch zu beachten, dass das Ausblenden der Bildlaufleiste die Benutzererfahrung beeinträchtigt, sodass bei der tatsächlichen Verwendung Kompromisse und Simulationstests erforderlich sind.

Das obige ist der detaillierte Inhalt vonBildlaufleiste verstecktes CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!