Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<h1>Při rolování se objeví směr</h1> <div id="stav">Při rolování se objeví směr</div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body, html { width: 200%; height: 200%; } #stav { position: fixed; top: 0; left: 50%; background: #000; color: #fff; padding: .5em; }
CSS
Autoformát
CSS reset
Až na konci
var stav = document.getElementById('stav'); var zleva = 0, shora = 0, novaZleva = 0, novaShora = 0; window.onscroll = function () { var zleva = document.documentElement.scrollLeft + document.body.scrollLeft; var shora = document.documentElement.scrollTop + document.body.scrollTop; // Vertikální rolování if (novaZleva != zleva) { stav.innerHTML = "Vodorovně "; stav.innerHTML += ((novaZleva > zleva) ? "← doleva" : "doprava →"); } // Vertikální rolování else if (novaShora != shora) { stav.innerHTML = "Svisle "; stav.innerHTML += ((novaShora > shora) ? "nahoru ↑" : "dolů ↓"); } novaZleva = zleva; novaShora = shora; };
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>