<html> <head> <style> #inner { width: 1000px; height: 1000px; } #outer { width: 300px; height: 300px; overflow: scroll; } </style> </head> <body> <div id="outer"><div id="inner"></div></div> <input type="text" id="info" /> <script language="javascript"> var info=document.getElementById("info"); var outer=document.getElementById("outer"); function onScroll() { if ((outer.scrollTop + outer.clientHeight) == outer.scrollHeight && (outer.scrollLeft + outer.clientWidth) == outer.scrollWidth) { info.value="right bottom"; } else if ((outer.scrollTop + outer.clientHeight) == outer.scrollHeight) { info.value="bottom"; } else if ((outer.scrollLeft + outer.clientWidth) == outer.scrollWidth) { info.value="right"; } else { info.value="somewhere"; } } outer.onscroll=onScroll; </script> </body> </html>