faqts : Computers : Programming : Languages : JavaScript : Event handling

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

8 of 9 people (89%) answered Yes
Recently 8 of 9 people (89%) answered Yes

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>