ugrás a tartalomhoz

Modal box: gördítősávok okosan?

pkadam · 2012. Jan. 14. (Szo), 10.19
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 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
 
1

padding

Burnee · 2012. Jan. 16. (H), 14.52
Szia!

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.
4

köszönöm

pkadam · 2012. Jan. 23. (H), 08.46
Működik remekül, köszönöm – mindössze a középre igazított háttérkép pozicionálása nem teljesen pixelpontos. A Chrome ugyanis máshogy számítja ki a képernyő közepét, mint a Firefox. Előbbinek Math.floor() kell a képernyőszélesség felére, a Firefoxnak viszont sima Math.round() (illetve nyilván akár Math.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ál Math.floor()-ral, Explorer-nél pedig... Nos, az IE-nél egyrészt szintén a Math.floor() jön a képbe, a document.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.
5

ugye figyeltél a Mac-re?

Burnee · 2012. Jan. 23. (H), 10.16
Nem hangsúlyoztam eléggé, de az aktuális böngésző scrollbarjanak vastagságát állapítsd meg mindig. A MAC-eken ugyanis ez kisebb, mint windowson sőt, a LION-nél már nincs is vastagsága, mert rálóg a tartalomra.
6

gördítősáv szélessége

Poetro · 2012. Jan. 23. (H), 10.37
David Walsh írt egy nagyszerű kis szkriptet, amivel ki lehet számolni a gördítősáv szélességét.
7

heuréka

pkadam · 2012. Jan. 23. (H), 12.26
Ez is jó ötlet, de az olyan esetekre nem használ, ahol nem biztos, hogy eredetileg kapott az oldal scrollbart. Viszont azt hiszem, rájöttem az univerzális megoldásra:
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á :)
2

Ne távolítsd el

janoszen · 2012. Jan. 22. (V), 10.38
Mi lenne, ha nem távolítanád el, hanem helyette megcsinálnád az elfedő ablakot position:fixed-re? Szinte minden modern bögésző támogatja
3

Természetesen az.

pkadam · 2012. Jan. 22. (V), 22.58
A modalbox stílusa eleve 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).