Q1383 If a user drags the window or frame scrollbar, is there a way to determine where in the document they've scrolled to?

You are here: irt.org | FAQ | JavaScript | Scroll | Q1383 [ previous next ]

Try the following (which will work as soon as the user moves their mouse over the document:

<html>

<head>
<script language="JavaScript"><!--
function onScroll() {
    if (document.layers) {
        document.myForm.x.value = window.pageXOffset;
        document.myForm.y.value = window.pageYOffset;
    }
    else if (document.all) {
        document.myForm.x.value = document.body.scrollLeft;
        document.myForm.y.value = document.body.scrollTop;
    }
}
//--></script>
</head>

<body onMousemove="onScroll()">

<p>
Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam
rem aperiam, eaque ipsa ab illo inventore veritatis
et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur
aut odit aut fugit, sed quia consequuntur magni dolores
eos qui ratione voluptatem sequi nesciunt.  Neque porro
quisquam est qui do lorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia nonnumquam eiusmodi
tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem.  Ut enim ad minima veniam, quia
nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur? Quis autem vel
eum iure reprehenderit qui in ea voluptate velit esse quam
nihil molestiae consequatur, vel illum qui dolorem eum
fugiat quo voluptas nulla pariatur?  At vero eos et
accusamus et iusto odio dignissimos ducimus qui blanditiis
praesentium voluptatum deleniti atque corrupti quos dolores
et quas molestias excepturi sint occaccati cupiditate
non provident, similique sunt in culpa qui officia deserunt
mollitia animi, id est laborum et dolorum fuga.  Et harum
quidem rerum facilis est et expedita distinctio. Nam libero
tempore, cum soluta nobis est eligendi optio cumque nihil
impedit quo minus id quod maxime placeat facere possimus,
omnis dolor repellendus.  Temporibus autem quibusdam et
aut officiis debitis aut rerum necessitatibus saepe eveniet
ut et voluptates repudiandae sint et molestiae non recusandae.
Itaque earum rerum hic tenetur a sapiente delectus
ut aut reiciendis voluptatibus maiores alias consequatur aut
perferendis doloribus asperiores repellat.
</p>

<form name="myForm">
x: <input type="text" name="x">
y: <input type="text" name="y">
</form>

<script language="JavaScript"><!--
if (document.layers) {
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = onScroll;
}
//--></script>

</body>

</html>