PDA

View Full Version : To know user has scrolled to the end


sugata_bhar
07-02-2008, 07:46 AM
I have a div element where scrolling is provided with the help of the overflow property.

How to figure out that the user has scrolled and viewed the last item in the div?

Is there an event for that

Philip M
07-02-2008, 08:11 AM
I have a div element where scrolling is provided with the help of the overflow property.

How to figure out that the user has scrolled and viewed the last item in the div?

Is there an event for that

No. There is no way you can detect what your users have viewed.

sugata_bhar
07-02-2008, 01:18 PM
<html>
<head>
<title>Zvonko *</title>
<script>
function checkPos(theBox){
bOK = document.getElementById('OK');
/*if(theBox.scrollTop>=theBox.offsetHeight){
bOK.style.display="block";
} else {
bOK.style.display="none";
}*/
var x= theBox.scrollTop;
var y=parseInt(theBox.scrollHeight);
if(x>=y){
bOK.style.display="block";alert(theBox.scrollHeight + "--" + theBox.scrollTop);
} else {
bOK.style.display="none";
}
//alert(theBox.scrollHeight )

}
</script>
</head>
<body>
<form>
<br><br><br><br><br>

<div id="divExample" style=" height:150px; overflow:auto; width:200px; display:block" onscroll="checkPos(this);">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin mauris vel neque. Aliquam erat volutpat. Curabitur vel ligula et massa cursus vehicula. Etiam risus massa, pharetra ut, dapibus vitae, sodales eget, urna. Nullam pharetra porttitor odio. Vivamus ut mauris. Quisque eget libero et turpis porttitor gravida. Donec libero. In sed arcu. Etiam posuere lorem eget augue. In hac habitasse platea dictumst. Morbi rutrum varius metus. Nunc adipiscing lectus non ipsum. Duis convallis molestie arcu. Donec nunc. Cras orci pede, tristique a, vulputate elementum, pellentesque eleifend, urna. Aliquam rutrum pellentesque velit. Aenean consequat magna vel dolor. Phasellus est.

Aliquam pede. In non ipsum non urna pretium pulvinar. Fusce volutpat. In hac habitasse platea dictumst. Morbi elit. Sed massa lectus, suscipit ac, porttitor ac, tempor in, turpis. Aliquam laoreet tempus felis. Nunc malesuada nisl non leo. Phasellus lacinia, nisi et fringilla sodales, augue elit facilisis nunc, id gravida neque lacus eu turpis. Duis quis orci. Fusce tempor. Duis rutrum sagittis lorem. Pellentesque consectetuer. In ultricies dolor quis est.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam congue scelerisque erat. Praesent eu justo. Pellentesque ultrices. Integer magna felis, porttitor imperdiet, cursus eget, iaculis at, velit. Integer rutrum posuere neque. Donec velit nunc, consequat et, accumsan eget, porttitor ac, tellus. Quisque tincidunt. Vestibulum in eros vel lorem mattis scelerisque. Praesent dolor metus, consectetuer sed, volutpat eget, euismod sed, mauris. Nulla auctor. Nullam fermentum ipsum id risus mollis placerat. Duis tellus enim, feugiat ac, tempus vitae, porta et, dui.


</div>
<input id=OK type=button value=OK style="display:none" onClick="alert('OK!')">
</form>
</body>
</html>


logically this should work but it is not working

Mr J
07-02-2008, 05:02 PM
Give this a try

<html>
<head>
<title>Zvonko *</title>

<script type="text/javascript">

function checkPos(theBox){
var x= theBox.scrollTop

bOK = document.getElementById('OK')

if(theBox.scrollTop>=theBox.scrollHeight-theBox.offsetHeight){
bOK.style.display="block"
}
else {
bOK.style.display="none"
}

}
</script>
</head>
<body>
<form>
<br><br><br><br><br>

<div id="divExample" style=" height:150px; overflow:auto; width:200px; display:block" onscroll="checkPos(this);">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin mauris vel neque. Aliquam erat volutpat. Curabitur vel ligula et massa cursus vehicula. Etiam risus massa, pharetra ut, dapibus vitae, sodales eget, urna. Nullam pharetra porttitor odio. Vivamus ut mauris. Quisque eget libero et turpis porttitor gravida. Donec libero. In sed arcu. Etiam posuere lorem eget augue. In hac habitasse platea dictumst. Morbi rutrum varius metus. Nunc adipiscing lectus non ipsum. Duis convallis molestie arcu. Donec nunc. Cras orci pede, tristique a, vulputate elementum, pellentesque eleifend, urna. Aliquam rutrum pellentesque velit. Aenean consequat magna vel dolor. Phasellus est.

Aliquam pede. In non ipsum non urna pretium pulvinar. Fusce volutpat. In hac habitasse platea dictumst. Morbi elit. Sed massa lectus, suscipit ac, porttitor ac, tempor in, turpis. Aliquam laoreet tempus felis. Nunc malesuada nisl non leo. Phasellus lacinia, nisi et fringilla sodales, augue elit facilisis nunc, id gravida neque lacus eu turpis. Duis quis orci. Fusce tempor. Duis rutrum sagittis lorem. Pellentesque consectetuer. In ultricies dolor quis est.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam congue scelerisque erat. Praesent eu justo. Pellentesque ultrices. Integer magna felis, porttitor imperdiet, cursus eget, iaculis at, velit. Integer rutrum posuere neque. Donec velit nunc, consequat et, accumsan eget, porttitor ac, tellus. Quisque tincidunt. Vestibulum in eros vel lorem mattis scelerisque. Praesent dolor metus, consectetuer sed, volutpat eget, euismod sed, mauris. Nulla auctor. Nullam fermentum ipsum id risus mollis placerat. Duis tellus enim, feugiat ac, tempus vitae, porta et, dui.
<P>END

</div>
<input id=OK type=button value=OK style="display:none" onClick="alert('OK!')">
</form>
</body>
</html>