torrius,
вот такие танцы с бубном ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#scroll{
background-color: #8B008B;
}
body, html{
height: 100%;
}
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p id="out">0.0</p>
<div id="scroll" style="height: 50%; width: 200px; overflow: auto; font-size: 30px;">
0<br>0<br>0<br>0<br>0<br>0<br>0<br>0<br>
0<br>0<br>0<br>0<br>0<br>0<br>0<br>0<br>
0<br>0<br>0<br>0<br>0<br>0<br>0<br>0<br>
0<br>0<br>0<br>0<br>0<br>0<br>0<br>0<br>
</div>
<script>
var out = document.getElementById('out');
var element = document.getElementById('scroll');
var temp = element.scrollTop
element.scrollTop = 1 + element.scrollHeight - element.clientHeight;
var height = element.scrollTop;
element.scrollTop = temp;
element.onscroll = function() {
var scroll = element.scrollTop ;
out.innerHTML = scroll + ' : ' + height ;
if( height - scroll === 0 ) out.innerHTML += "end"
}
</script>
</body>
</html>