我们可以使用 onScroll 进行条件检查吗

Question

功能：

用户必须滚动并通读 TnC（条款和条件）页面，然后才能单击 "Next" 进入下一页。

因此，如果用户没有阅读TnC并点击"Next"，将显示一个提示"Please scroll and read TnC before proceeding"。否则，当用户滚动 TnC 时，用户将能够单击 "Next" 进入下一页。

已完成：

我已经为以下容器设置了一个条件检查，如果它滚动，如果滚动，它将允许用户单击 "Next" 并继续到下一个页面，否则如果滚动没有被检查，它会显示提示信息。

问题：

我无法获得正确的检查条件，因为当用户单击 "NEXT" 按钮时，它仍会将用户带到下一页。

我可能做错了，因此，我可以寻求帮助吗？谢谢

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>

Answer 1

您可以通过 jquery 的 scroll 方法检查 page/div 是否滚动。

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

更新：

将 isScrolled 保留为全局变量。然后你在哪里处理点击事件：

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

如果您想检查用户是否已滚动到 document/div 的末尾，请这样做：

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;
}

Answer 2

不知道我是否理解您的要求，但尝试在类似的行上创建一个 fiddle...我正在比较 scrollTop 以确定用户是否在继续之前滚动了整个内容...请检查 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);
});
});

我们可以使用 onScroll 进行条件检查吗

Can we use onScroll to do a Condition check

javascript

jquery

if-statement

onscroll