Wyłącz pionowy pasek przewijania przy przepełnieniu div: auto

113

Czy można zezwolić tylko na poziomy pasek przewijania podczas korzystania z przepełnienia: auto (lub przewijanie)?

html css scroll scrollbar joedborg
źródło
Zwróć uwagę, że margin-bottomz wartością ujemną będzie bałagan overflow-y: hiddenitp.
Andrew

Odpowiedzi:

232

Te dwie właściwości CSS mogą służyć do ukrywania pasków przewijania:

overflow-y: hidden; // hide vertical
overflow-x: hidden; // hide horizontal
Łukasz
źródło
@Coulton A co z safari i chrome?
QMaster
W związku z tym działa w Safari i wiem, że działa w Chrome.
Łukasz
3
Warto wspomnieć, że nadal możesz przewijać element div za pomocą tab, pod warunkiem, że w ukrytym przepełnieniu znajdują się linki lub elementy wejściowe
William Brochmann
40

Powinieneś używać tylko

overflow-y:hidden; - Użyj tego do ukrycia pionowego zwoju

overflow-x:auto; - Użyj tego, aby wyświetlić przewijanie w poziomie

Luke wspomniał, że obie są ukryte. więc podałem to osobno.

Siva Charan
źródło
21

przepełnienie: auto;
overflow-y: ukryty;

Dla IE8: -ms-overflow-y: hidden;

Albo :

Aby ukryć X :

<div style="height:150x; width:450px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;"></div>

Aby ukryć Y :

<div style="height:150px; width:450px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;"></div>
Losowa osoba
źródło
8

Jeśli chcesz osiągnąć to samo w Gecko (NS6 +, Mozilla itp.) I IE4 + jednocześnie, uważam, że powinno to załatwić sprawę: V

body {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: auto;
}

Zostanie to zastosowane do całego tagu body, zaktualizuj go do odpowiedniego CSS i zastosuj te właściwości.

Nirav Mehta
źródło
2

Dodaj następujące informacje:

body{
overflow-y:hidden;
}
Zeinab
źródło
1

Te zasady są kompatybilne z wszystkimi przeglądarkami:

body {overflow: hidden; }
body::-webkit-scrollbar { width: 0 !important; }
body { overflow: -moz-scrollbars-none; }
body { -ms-overflow-style: none; }
tamueka
źródło
1

A może skrótowy zapis?

{overflow: auto hidden;}
Chong Lip Phang
źródło
0

jeśli chcesz wyłączyć pasek przewijania, ale nadal możesz przewijać zawartość wewnętrznego DIV, użyj poniższego kodu w css,

.divHideScroll::-webkit-scrollbar {
    width: 0 !important
}
.divHideScroll {
    overflow: -moz-scrollbars-none;
}
.divHideScroll {
    -ms-overflow-style: none;
}

divHideScroll to nazwa klasy docelowego elementu div.

Będzie działać we wszystkich głównych przeglądarkach (Chrome, Safari, Mozilla, Opera i IE)

Tahir Alvi
źródło