Weboldal túlgörgetési hiba javítása

Ha a weboldalunk valamiért görgethető vízszintesen vagy függőlegesen, és egy fölösleges üres sáv jelenik meg, az általában azért van, mert egy túlméretes elem kitolja a dokumentum szélét.

Ha ez történik, akkor időnként nagyon nehéz megtalálni a hibát okozó elemet a Fejlesztői Eszközöket használva, mivel nem tudjuk, hol helyezkedik el ez az elem.

Hibás oldal
Hiba: az oldal vízszintesen görgethető

Van egy kis CSS trükk, amivel könnyen megtalálhatjuk a túlméretes elemet. Ezt a szabályt adjuk hozzá az oldalhoz a Fejlesztői Eszközökben:

* {
    outline: 1px solid red !important;
}

Ezután görgessünk végig az oldalon, és megtalálhatjuk a kilógó elemet:

Hibás oldal javítása
Meg is van a hunyó

Alternatív megoldásként, a hibás elem keresgélése helyett használhatjuk az alábbi CSS kódot a vízszintes görgetés teljes letiltásához:

html {
    overflow-x: hidden;
}

Ez igazából csak a tünetet szünteti meg, és más gondokat is okozhat, szóval inkább a hiba forrását érdemes megkeresni a fenti módszerrel.


A Szerzőről
Piller Balázs senior webfejlesztő, SEO specialista, és a WordPress szakértője. Számos sikeres projektben vett részt vezető fejlesztőként. Az általa írt kód jelenleg több mint 1 000 000 webhelyen fut.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük