Scroll Event for DIV Tag - Licence Agreement Reading Confirmation

Technorati-

Labels: onscroll, div, licence agreement, scroll check

Hi Friends,

Recently we got a requirement from client that the user must read the "Licence Agreement", that doesn't mean to check the I Agree checkbox. The user must read the licence agreement. As we can't assure that the user will read the agreement. So the only way to know is to checking the scroll position of Licence Agreement box. If the scroll is reached to end of the box means that user has read the agreement.

Here is the sample program:

<div id="frAgreement" style="height: 170px; overflow: scroll;width:100% " onscroll="checkScrollPosition();">
   Terms of Use<br/>
.
.
.
.
.
</div>
<input type="button" value="Submit" onclick="return isReadCompletely();"/>

Here I have placed the Licence Agreement text in another html file and placed it in a iframe, you can directly place the Licence Agreement Text in the division.

<script language="javascript">
  
   var blnPinScrollbar = false;
  
   function checkScrollPosition()
   {
       var divFrame = document.getElementById('frAgreement');
       if(divFrame.scrollHeight - divFrame.scrollTop + 17 == divFrame.offsetHeight)
       {           
           blnPinScrollbar = true;
       }
   }

   function isReadCompletely()
   {
       if(blnPinScrollbar)
       {
           alert("Page is submited");
           return true;
       }
       else
       {
           alert("Please read the agreement and click on submit.");
           return false;
       }
   }
</script>

I have declared a global variable blnPinScrollbar which is set as false & whenever scroll event fires it will check whether the division is scrolled to the end (17 is the scrollbar up arrow height, this value may vary from user to user. Please try with different values if it didn't works for you.).

You can find sample page with the above example at - http://vijjub4u.googlepages.com/main.html

Feel free to mail me at vijjub4u@gmail.com if you have any problems/issues with this solution.

This sample can also be used for checking whether a division / text box / scrollable control is scrolled are not.