Zasekávání fixního pozadí v IE 11

Díky CSS deklaraci background-attachment: fixed je možné úplně jednoduchým způsobem „zafixovat“ pozadí daného elementu při scrollování a dosáhnout tak jakéhosi parallax efektu. Vše funguje krásně a jednoduše, až na prohlížeč Internet Explorer 11.

V prohlížeči Internet Explorer verze 11 se však můžete setkat s bugem / nežádoucím chováním. Zde se při scrollování obrázek na pozadí nepohybuje plynule, jako v jiných prohlížečích, a pseudo-parallax efekt nevypadá vůbec pěkně. Scrollování zde totiž probíhá, na rozdíl od jiných prohlížečů, skokově a celé to ve výsledku vypadá „zasekaně“.

Naštěstí existuje jednoduché Javascriptové řešení, jak i v IE 11 dosáhnout plynulého scrollování a celý problém s fixním pozadím je vyřešen:

if(navigator.userAgent.match(/Trident\/7\./)) {
	document.body.addEventListener("mousewheel", function() {
		event.preventDefault();
		var wd = event.wheelDelta;
		var csp = window.pageYOffset;
		window.scrollTo(0, csp - wd);
	});
}

Neváhejte mě kontaktovat

V případě zájmu o mé služby mě můžete kontaktovat na

pavel@pavelkovar.cz

nebo

Fyzická osoba zapsaná v Živnostenském rejstříku od 30. 7. 2014, eviduje Městský úřad Rožnov pod Radhoštěm,
Pavel Kovář, IČO: 03246078