Codice PHP:
<html>
<head>
<title>Scroll</title>
<script type="text/javascript">
function getPageCoords (element) { // thanks to 'Martin Honnen' for this idea
var myElement, coords = {x: 0, y: 0};
// prendo lo scroll del body
myElement = element; // salvo l'elemento: mi riserve dopo
while (element) {
coords.x -= element.scrollLeft;
coords.y -= element.scrollTop;
element = element.offsetParent;
}
element = myElement; // l'avevo salvato
// ora prendo l'offset dell'elemento
while (element) {
coords.x += element.offsetLeft;
coords.y += element.offsetTop;
element = element.offsetParent;
}
// ritorno le coordinate dell'angolo in alto a sx
// dell'elemento considerate rispetto all'angolo
// in alto a sinistra della finestra visibile
return coords;
}
function vediScroll(idObj) {
var obj, coords;
obj=document.getElementById(idObj);
coords = getPageCoords(obj);
alert("x:" + coords.x + " y:" + coords.y);
}
</script>
</head>
<body onscroll="vediScroll('miodiv');">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer nec tortor. Nulla imperdiet risus quis mauris. Morbi nec felis ac ligula auctor volutpat. Ut nibh mi, lacinia ac, interdum ac, tempus non, lacus. Praesent hendrerit fringilla enim. Donec tellus. Donec eget pede ut felis commodo fringilla. Fusce aliquam. Morbi a felis a purus feugiat gravida. Donec condimentum est eget lorem. Aliquam placerat venenatis nisl. Sed volutpat, urna vel mollis cursus, lorem nulla elementum nulla, vitae viverra sapien lorem ut augue. Quisque lacus urna, gravida quis, lacinia non, porta vel, mi. In orci. Donec suscipit, lorem non interdum sagittis, enim urna aliquet eros, nec auctor tortor pede vel sem. Mauris commodo aliquet magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat quam a lorem. Phasellus tellus lacus, luctus mattis, porta vel, vehicula a, metus.
</p>
<div id="miodiv" style="border: 1px solid black">Il div è qua!</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer nec tortor. Nulla imperdiet risus quis mauris. Morbi nec felis ac ligula auctor volutpat. Ut nibh mi, lacinia ac, interdum ac, tempus non, lacus. Praesent hendrerit fringilla enim. Donec tellus. Donec eget pede ut felis commodo fringilla. Fusce aliquam. Morbi a felis a purus feugiat gravida. Donec condimentum est eget lorem. Aliquam placerat venenatis nisl. Sed volutpat, urna vel mollis cursus, lorem nulla elementum nulla, vitae viverra sapien lorem ut augue. Quisque lacus urna, gravida quis, lacinia non, porta vel, mi. In orci. Donec suscipit, lorem non interdum sagittis, enim urna aliquet eros, nec auctor tortor pede vel sem. Mauris commodo aliquet magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat quam a lorem. Phasellus tellus lacus, luctus mattis, porta vel, vehicula a, metus.
</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer nec tortor. Nulla imperdiet risus quis mauris. Morbi nec felis ac ligula auctor volutpat. Ut nibh mi, lacinia ac, interdum ac, tempus non, lacus. Praesent hendrerit fringilla enim. Donec tellus. Donec eget pede ut felis commodo fringilla. Fusce aliquam. Morbi a felis a purus feugiat gravida. Donec condimentum est eget lorem. Aliquam placerat venenatis nisl. Sed volutpat, urna vel mollis cursus, lorem nulla elementum nulla, vitae viverra sapien lorem ut augue. Quisque lacus urna, gravida quis, lacinia non, porta vel, mi. In orci. Donec suscipit, lorem non interdum sagittis, enim urna aliquet eros, nec auctor tortor pede vel sem. Mauris commodo aliquet magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat quam a lorem. Phasellus tellus lacus, luctus mattis, porta vel, vehicula a, metus.
</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer nec tortor. Nulla imperdiet risus quis mauris. Morbi nec felis ac ligula auctor volutpat. Ut nibh mi, lacinia ac, interdum ac, tempus non, lacus. Praesent hendrerit fringilla enim. Donec tellus. Donec eget pede ut felis commodo fringilla. Fusce aliquam. Morbi a felis a purus feugiat gravida. Donec condimentum est eget lorem. Aliquam placerat venenatis nisl. Sed volutpat, urna vel mollis cursus, lorem nulla elementum nulla, vitae viverra sapien lorem ut augue. Quisque lacus urna, gravida quis, lacinia non, porta vel, mi. In orci. Donec suscipit, lorem non interdum sagittis, enim urna aliquet eros, nec auctor tortor pede vel sem. Mauris commodo aliquet magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat quam a lorem. Phasellus tellus lacus, luctus mattis, porta vel, vehicula a, metus.
</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer nec tortor. Nulla imperdiet risus quis mauris. Morbi nec felis ac ligula auctor volutpat. Ut nibh mi, lacinia ac, interdum ac, tempus non, lacus. Praesent hendrerit fringilla enim. Donec tellus. Donec eget pede ut felis commodo fringilla. Fusce aliquam. Morbi a felis a purus feugiat gravida. Donec condimentum est eget lorem. Aliquam placerat venenatis nisl. Sed volutpat, urna vel mollis cursus, lorem nulla elementum nulla, vitae viverra sapien lorem ut augue. Quisque lacus urna, gravida quis, lacinia non, porta vel, mi. In orci. Donec suscipit, lorem non interdum sagittis, enim urna aliquet eros, nec auctor tortor pede vel sem. Mauris commodo aliquet magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat quam a lorem. Phasellus tellus lacus, luctus mattis, porta vel, vehicula a, metus.
</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer nec tortor. Nulla imperdiet risus quis mauris. Morbi nec felis ac ligula auctor volutpat. Ut nibh mi, lacinia ac, interdum ac, tempus non, lacus. Praesent hendrerit fringilla enim. Donec tellus. Donec eget pede ut felis commodo fringilla. Fusce aliquam. Morbi a felis a purus feugiat gravida. Donec condimentum est eget lorem. Aliquam placerat venenatis nisl. Sed volutpat, urna vel mollis cursus, lorem nulla elementum nulla, vitae viverra sapien lorem ut augue. Quisque lacus urna, gravida quis, lacinia non, porta vel, mi. In orci. Donec suscipit, lorem non interdum sagittis, enim urna aliquet eros, nec auctor tortor pede vel sem. Mauris commodo aliquet magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat quam a lorem. Phasellus tellus lacus, luctus mattis, porta vel, vehicula a, metus.
</p>
</body>
</html>
Restituisce le coordinate dell'angolo in alto a sx di un elemento della pagina riferite all'angolo in alto a sx della parte visibile della pagina, attivabile onscroll.
Rispondi quotando