Modal box: gördítősávok okosan?
Sziasztok!
A probléma talán nem is igényel mintakódot, a kérdés a következő:
Hogyan tudnám elérni, hogy ha megjelenítek egy modal boxot, akkor a body scrollbarja eltűnjön, de a helye megmaradjon (tehát ne ugorjon vízszintesen az oldal)?
A body-nak
Van erre best practice?
Előre is köszönöm,
Ádám
■ A probléma talán nem is igényel mintakódot, a kérdés a következő:
Hogyan tudnám elérni, hogy ha megjelenítek egy modal boxot, akkor a body scrollbarja eltűnjön, de a helye megmaradjon (tehát ne ugorjon vízszintesen az oldal)?
A body-nak
overflow-y:scroll van beállítva, ha ezt a modal megjelenítésekor eltávolítom (vagy overflow:hidden-t adok meg), akkor az oldal ugye jobbra ugrik fél scrollbar-szélességnyit. Ha nem nyúlok hozzá, és a modal is kap overflow-y:scroll-t, akkor viszont a body scrollbarja mellett jelenik meg a modalé, ez szintén nem jó.Van erre best practice?
Előre is köszönöm,
Ádám
padding
A modal-box megjelenítése előtt
body { overflow: hidden; padding-right: [scrollbar vastagsága]; }.A scrollbart egy egyszerű javascripttel le tudod kérdezni (leírom, ha kell). Vigyázz, hogy csak akkor adj paddinget, ha egyébként lenne scrollbar.
köszönöm
Math.floor()kell a képernyőszélesség felére, a Firefoxnak viszont simaMath.round()(illetve nyilván akárMath.ceil(), hiszen ha nem egész, akkor csak 0,5-re végződhet). Tehát a Chrome lefelé kerekíti a félpixeleket, a FF pedig felfelé – erre nem találtam megoldást.Az Explorerrel azonban még nagyobb gondok vannak: ő ugyanis egy belső keret szélességét is hozzáadja
document.documentElement.offsetWidth-hez, ami miatt (középre igazított oldalnál) pár pixelt mégis ugrik az oldal (a tartalom és a háttérkép is). Van erre működőképes megoldás?UPDATE: Nos, van. UserAgent-függő módon kiszámolva. A Firefox-nál tehát
Math.ceil()-lel, Chrome-nálMath.floor()-ral, Explorer-nél pedig... Nos, az IE-nél egyrészt szintén aMath.floor()jön a képbe, adocument.documentElement.offsetWidth-ből pedig le kell vonni 4 pixelt, hogy megkapjuk a tényleges méretét (és reménykedni abban, hogy ez mindegyik verziójánál bejön). Innentől tökéletesen működik minden böngészőben. De milyen áron.ugye figyeltél a Mac-re?
gördítősáv szélessége
heuréka
1. Lemérem a body szélességét
2. Eltüntetem a gördítősávot
3. Újramérem a body szélességét
4. A két mérés különbsége a scrollbar (ami akár 0), és ez lesz a marginRight, voilá :)
Ne távolítsd el
Természetesen az.
position: fixed, viszont ha ott marad a gördítősáv, akkor a háttérben maradó lapot görgeti a böngésző, amit mindenképp el szeretnék kerülni (erre egyrészt semmi szükség, és zavaró is, másrészt mivel el is sötétül, egy óvatlan és alig észrevehető görgetés megzavarhatja a felhasználót a tájékozódásban).