Czy można zapobiec przewinięciu w poziomie, gdy overflow-x jest ukryty?

Mam stronę internetową, która ma treść, która rozciąga się poza prawą krawędź okna przeglądarki. Ustawiłem overflow-x: hidden na <body>, aby wyłączyć dolny pasek przewijania, ale nadal mogę przewijać poziomo za pomocą gładzika, co nie jest tym, czego chcę.Czy można zapobiec przewinięciu w poziomie, gdy overflow-x jest ukryty?

Czy istnieje sposób, aby zapobiec przewijaniu przeglądarki w poziomie?

Na marginesie: Safari 4.0.4 przewija się tylko w poziomie, a przewijanie jest "lepkie" i "podskakujące", podczas gdy Firefox zawsze płynnie przewija się poziomo.

Źródło

2010-04-15 Andrew LeClair

można spróbować ustawić w CSS:

html{ 
    overflow-x: hidden; 
}

zamiast użycia body selektora. Próbowałem tego i pracuję w firefox.

Źródło

2010-04-15 20:12:17

Próbowałem również to w FF, i wydaje się, że ma dokładnie ten sam problem. Lepszym rozwiązaniem byłoby, jak zauważył @Chaulky, po prostu ustawić wyświetlacz na "none". Jeśli chcesz, aby to się pojawiło, zrób js/jquery, aby przenieść go ponownie. – Automatico

Jeśli wszystko inne zawiedzie, możesz użyć Javascript, aby stale zmuszać przeglądarkę do przewijania w lewo za pomocą window.scrollTo (xpos, ypos). W przypadku xpos będziesz chciał używać 0 i ypos, aby uzyskać aktualną pozycję przewijania użytkownika, zakładając, że chcesz zezwalać na przewijanie w pionie.

Możesz umieścić swoje wywołanie funkcji w procedurze obsługi zdarzeń window.onscroll lub w okresie javascript, który działa co 100 ms. Zależy od Ciebie. Jeśli potrzebujesz przykładów kodu, po prostu zapytaj.

Źródło

2010-04-16 17:13:50 InvisibleBacon

Aby zapobiec przewijaniu, można użyć kombinacji 'overflow: hidden',' window.onscroll' i 'window.scrollTo' w celu ukrycia pasków przewijania i skierowania użytkownika do 0,0 (w lewym górnym rogu ekran) podczas przewijania, skutecznie utrzymując stronę w jej aktualnej pozycji (lub ypos jako bieżącą pozycję przewijania użytkownika, aby zachować przewijanie pionowe zgodnie z sugestią @InvisibleBacon) – Seagrass

Byłoby lepiej zrozumieć, gdybyś miał przykład.

jest to długi URL lub coś bez białych znaków? Czy masz ustawiony element white-space:nowrap;?

Jeśli masz pojemnik o określonej wielkości (jeden, który pasuje w rzutni), tekst powinien przylegać prawidłowo (chyba, że to długa linia bez spacji)

Źródło

2010-04-17 05:17:49

Myślę, że prawdziwe pytanie brzmi, dlaczego czy Twoje treści przepełniają się poza zamierzonym rozmiarem strony? Czy ta treść nie jest widoczna dla użytkowników? W takim wypadku umieść go gdzieś w div i ustaw jego wyświetlanie na none. To pozwoliłoby całkowicie uniknąć problemu przelewu.

Jeśli istnieje uzasadniony powód, dla którego ma on spowodować przepełnienie kontenera, należy jawnie ustawić rozmiar kontenera, a następnie przepełnienie x do ukrycia. Nie testowałem tego, ale to powinno zapobiegać obecnemu zachowaniu. Jeśli nie, spróbuj użyć znacznika div, a nie znacznika body. Przeglądarki mogą działać dziwnie, ponieważ działają na samym znaczniku body.

Źródło

2010-04-17 16:09:44 Chaulky

Wchodzę do Chrome i otwieram narzędzia programistyczne na komputerze. Usuń właściwość overflow-x. Następnie kontynuuj usuwanie każdego elementu rodzica na swojej stronie. Kiedy zobaczysz, że poziomy pasek przewijania znika, wiesz, że znalazłeś swój problem. Następnie zanurz się w ten element. Zakładam, że masz szerokość 100% i nałożyłeś na nią margines. Usuń margines, jeśli tak jest.

Źródło

2013-05-10 16:16:56

Stara dyskusja, ale może być przydatna dla osób szukających właściwej odpowiedzi!

Ustaw "overflow: hidden" na div elementu nadrzędnego elementu, który jest szerszy niż okno przeglądarki (nie html lub body, jak normalnie robisz), który zatrzyma przewijanie z de pad lub pad strzałki.

Źródło

2013-06-01 23:26:04 Clauce

Czy można zapobiec przewinięciu w poziomie, gdy overflow-x jest ukryty?

Odpowiedz

Powiązane problemy