Entry
How can I check whether a block element like a div with overflow as auto or scroll has been scrolled?
How can I check whether a block element like a div with overflow as auto or scroll has been scrolled?
Mar 8th, 2006 08:36
Martin Honnen, http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/events/onscroll.asp
With IE 5 and later on Windows you can attach an event handler for the
scroll event, with Mozilla you can add an event listener for the scroll
event. Opera 9 preview also seems to fire a scroll event if DOM Level 2
addEventListener has registered an event listener.
If you want to check how far the scroll position has been changed then
you need to store element.scrollTop respectively element.scrollLeft and
compare to the actual values.
Here is a complete HTML document with a div element with CSS overflow:
auto, height and width restricted so that the contents overflows and the
browsers then display scrollbars the user can scroll with.
The example script sets up the event listener and then outputs some info
about the event and the properties scrollLeft and scrollTop.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>scroll event</title>
<style type="text/css">
div#d1 {
overflow: auto;
height: 200px;
border: 1px solid darkgreen;
width: 200px;
}
div#d1 p {
width: 400px;
}
</style>
<script type="text/javascript">
function generateContent () {
for (var i = 1; i <= 30; i++) {
document.write('<p>' + i
+ ': Kibology for all. All for Kibology.<\/p>');
}
}
function output (text, tagName, parentNode) {
tagName = tagName || 'p';
parentNode = parentNode || document.body;
var doc = parentNode.ownerDocument || document;
var element = doc.createElement(tagName);
element.appendChild(doc.createTextNode(text));
parentNode.appendChild(element);
}
function reportEvent (currentTarget, evt) {
var text = evt.type + ' handled at ' + currentTarget + ': ';
if (typeof currentTarget.oldScrollTop != 'undefined' &&
currentTarget.oldScrollTop != currentTarget.scrollTop)
{
text += ' scrolled vertically by ' +
(currentTarget.scrollTop - currentTarget.oldScrollTop) + '; ';
}
if (typeof currentTarget.oldScrollLeft != 'undefined' &&
currentTarget.oldScrollLeft != currentTarget.scrollLeft)
{
text += ' scrolled horizontally by ' +
(currentTarget.scrollLeft - currentTarget.oldScrollLeft) + '.';
}
currentTarget.oldScrollTop = currentTarget.scrollTop;
currentTarget.oldScrollLeft = currentTarget.scrollLeft;
output(text);
}
function setUpScrollHandler () {
var div = document.getElementById('d1');
if (typeof div.addEventListener != 'undefined') {
div.addEventListener(
'scroll',
function (evt) {
reportEvent(this, evt);
},
false
);
}
else if (typeof div.attachEvent != 'undefined') {
div.attachEvent(
'onscroll',
function () {
reportEvent(div, window.event);
}
);
}
}
window.onload = setUpScrollHandler
</script>
</head>
<body>
<h1>scroll event</h1>
<div id="d1">
<script type="text/javascript">
generateContent();
</script>
</div>
</body>
</html>
