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

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ół.

— 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