Can we use onScroll to do a Condition check

Question

Functionality:

User has to scroll and read through the TnC(Terms & Condition) Page before being allowed to click "Next" to proceed to the next page.

Hence, if user does not read through the TnC and clicks "Next", a prompt will be displayed "Please scroll and read TnC before proceeding". Else, when user has scrolled the TnC, user will be able to click "Next" to proceed to the next page.

What has been done:

I have set a conditional check for the following container if it is scrolled, if scroll, it will then allow user to click "Next" and proceed to the enxt page, else if scroll is not checked, it will display the prompt message.

Issue:

I am not able to get the check condition correct as when user clicks on the "NEXT" button, it will still bring the user to the next page.

I may have done it wrongly, hence, may I seek some help? Thanks

function AgreeTnC() {

  //Conditional check user has scrolled the T&C
  if ($.trim($("#TermsNCondition").is(':scrolled'))) {
    $('#TnC').fadeOut({
      duration: slideDuration,
      queue: false
    });
    $('#QnA').fadeIn({
      duration: slideDuration,
      queue: false
    });
  } else {
    console.log("READTNC");
    $("#READTNC").html("Please Do Read Through Terms & Condition Before Proceeding.");
    $("#READTNC").fadeIn();
  }

}

<div id="TnC" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=2; top:0px; left:0px; ">

  <div id="READTNC" style="z-index:2; position:absolute; top:950px; left:750px; display: none; font-size:30px; font-family:'CenturyGothic'; width:1080; color:#fff;"><font face="CenturyGothic">Please Do Read Through Terms & Condition Before Proceeding.</font>
  </div>

  <div id="TermsNCondition" class="Container">
    <div class="innerScroll">
      <div class="context">
        <p><font face="CenturyGothic">TEST TERMS & CONDITION TEXT</font>
        </p>
      </div>
    </div>
  </div>
  <button id="Agree" onclick="AgreeTnC()"></button>
  <button id="Back" onclick="PreviousMainPage()"></button>
</div>

Possible duplicate of [Check if a user has scrolled to the bottom](http://stackoverflow.com/questions/3898130/check-if-a-user-has-scrolled-to-the-bottom) — Pierre, Feb 23 '16 at 12:36
Possible duplicate of [How to detect if browser window is scrolled to bottom?](http://stackoverflow.com/questions/9439725/javascript-how-to-detect-if-browser-window-is-scrolled-to-bottom) — Pierre, Feb 23 '16 at 12:37
Possible duplicate of [Detecting when user scrolls to bottom of div with jQuery](http://stackoverflow.com/questions/6271237/detecting-when-user-scrolls-to-bottom-of-div-with-jquery) — Pierre, Feb 23 '16 at 12:38
Possible duplicate of [How to find out if the user scrolled to the end of a HTML container with jQuery?](http://stackoverflow.com/questions/12094421/how-to-find-out-if-the-user-scrolled-to-the-end-of-a-html-container-with-jquery) — Pierre, Feb 23 '16 at 12:38

score 0 · Accepted Answer · answered Feb 23 '16 at 12:31

donno whether I understood your requirement but tried to create a fiddle on similar lines... I am comparing scrollTop to decide whether the user scrolled through entire thing before proceeding... Kindly check https://jsfiddle.net/z6q7xzn4/

jQuery

$(document).ready(function(){
$('.check').on('click', function(){

var scrollTop = $('.terms').scrollTop();
if (scrollTop<357)
{
$('.msg').fadeIn(2000).fadeOut(2000);
}
else
{
    alert('thanks for reading tnc');
}
console.log( "scroll height:"+scrollTop);
});
});

score -1 · Answer 2 · edited Feb 23 '16 at 13:17

You can check if the page/div is scrolled by scroll method of jquery.

var isScrolled = false;
$('yourselector').scroll(function () {
    isScrolled = true;
});

UPDATE:

Keep the isScrolled as a global variable. Then where you handle the click event do like:

$('nextButtonSelector').on('click', function() {
    if(isScrolled) {
        // Code to show next page 
    } else {
        // Handle the not scrolled scenario by notifying user or something 
    }
})

and if you want to check if user has scrolled to the end of the document/div, do like this:

if ($(window).scrollTop() + $(window).height() > $('yourScrollSelector').height() - 10) {
    // Now the user has scrolled to the end of the div/document. So set the 
    // isScrolled to true.                  
    isScrolled = true;
}

The method that is provided is executed immediately when user scrolls, but I need the "NEXT" button to act as a check. Meaning when user doesn;t scroll, and clicks NExt, it would nt navigate to the next page else when user scrolls and click next, it will navigate to the next page — Luke, Feb 23 '16 at 10:50

Can we use onScroll to do a Condition check

2 Answers2