Wyłącz przewijanie treści

150

Chciałbym bodycałkowicie wyłączyć przewijanie w HTML . Wypróbowałem następujące opcje:

  • overflow: hidden; (nie działa, nie wyłącza przewijania, po prostu ukrywa pasek przewijania)

  • position: fixed; (to zadziałało, ale przewinęło się całkowicie do góry, co jest niedopuszczalne w tej konkretnej aplikacji)

Nie mogłem znaleźć żadnej alternatywy dla tych dwóch opcji, czy są jakieś więcej?

html css scroll Micha Wiedenmann
źródło
3
dla którego elementu zastosowałeś przepełnienie: ukryty?
Sajad Karuthedath
Co dokładnie próbujesz tutaj osiągnąć? Jaki jest Twój cel końcowy?
jbutler483
2
Pokazywanie odpowiedniego kodu ułatwi Ci udzielenie pomocy.
Sleek Geek
1
przepełnienie: ukryte; jest droga do zrobienia. Jeśli to nie działa, masz inny problem w swoim css. Wypróbuj html, body {overflow: hidden;}, jeśli to nie działa, spróbuj * {overflow: hidden;} i spróbuj dowiedzieć się, co jest nie tak
Jonas Grumann

Odpowiedzi:

267

Ustaw heighti overflow:

html, body {margin: 0; height: 100%; overflow: hidden}

http://jsfiddle.net/q99hvawt/

pavel
źródło
3
zapomniałem o treści „html” przed ”.
2
Nie działa na iOS, gdy masz element nakładki, który ma ustaloną pozycję.
notQ
1
Możesz po prostu dodać „przepełnienie”: „ukryte” i będzie działać dobrze.
JPG
To rozwiązanie nie od razu zadziałało u mnie, ale po inspekcji gdzieś nadpisywano „margines”. Ustawienie „margin: 0;” tego elementu załatwił sprawę.
joaoprib
22

HTML css działa dobrze, jeśli tag body nie robi nic, co również możesz napisać

<body scroll="no" style="overflow: hidden">

W takim przypadku nadpisywanie powinno znajdować się na tagu body, jest łatwiejsze do kontrolowania, ale czasami powoduje ból głowy.

Lalo
źródło
23
To nie jest poprawny HTML5
mbomb007
@ mbomb007 Czy możesz skomentować tutaj błąd związany z HTML5?
Ethan,
8
@Ethan scrollAtrybut nie jest prawidłowy w <body>tagu. Nie jest wymieniony jako ważny w żadnej specyfikacji, którą mogę znaleźć. w3schools ; MDN ; Quackit
mbomb007
14

Ten post był pomocny, ale chciałem tylko podzielić się niewielką alternatywą, która może pomóc innym:

Ustawienie max-heightzamiast heightrównież załatwia sprawę. W moim przypadku wyłączam przewijanie na podstawie przełącznika klas. Ustawienie, .someContainer {height: 100%; overflow: hidden;}kiedy wysokość kontenera jest mniejsza niż wysokość widoku, spowodowałoby rozciągnięcie kontenera, co nie byłoby tym, czego byś chciał. Ustawienie max-heightkont w tym celu, ale jeśli wysokość kontenera jest większa niż widoczna w momencie zmiany zawartości, nadal wyłącza przewijanie.

joebjoe
źródło
to zaoszczędziło mi dnia dla przeglądarek na komputerze bez niepożądanego efektu ubocznego przewijania od góry do góry. ale nie działa w przeglądarkach mobilnych (iPhone5s i Android).
bob
6

Aby to osiągnąć, dodaj 2 właściwości CSS do <body>elementu.

body {
   height: 100%;
   overflow-y: hidden;
}

Obecnie istnieje wiele serwisów informacyjnych, które wymagają od użytkowników założenia konta. Zwykle zapewniają pełny dostęp do strony na około sekundę, a następnie wyświetlają wyskakujące okienko i uniemożliwiają użytkownikom przewijanie w dół.

Telegraf

bvdb
źródło
to ukrywa pasek przewijania. Jednak pytanie dotyczy konkretnie alternatywy dla ukrycia paska przewijania
DataGeek
@DataGeek, to nie tylko ukrywa pasek przewijania, ale także zatrzymuje możliwość przewijania w dół. I jak rozumiem, o to właśnie proszono. tj. nie tylko go ukrywa, ale także uniemożliwia przewijanie w dół.
bvdb