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

Can we use onScroll to do a Condition check

本文关键字：条件 检查 可以使 onScroll 我们      更新时间：2023-09-26

功能：

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

因此，如果用户没有通读TnC并单击"下一步"，将显示提示"请在继续之前滚动并阅读TnC"。否则，当用户滚动TnC时，用户将能够单击"下一步"进入下一页。

做了什么：

我已经为以下容器设置了条件检查，如果它被滚动，如果滚动，它将允许用户单击"下一步"并进入enxt页面，否则如果未选中滚动，它将显示提示消息。

问题：

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

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

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>

>不知道我是否理解您的要求，但试图在类似的行上创建一个小提琴......我正在比较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);
});
});

你可以通过 jquery 的方法检查页面/div 是否scroll滚动。

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

如果您想检查用户是否已滚动到文档/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;
}
相关文章：