Question

功能性：

用户必须滚动并阅读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>

Answer 1

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

Answer 2

您可以通过jquery的scroll方法检查页面/ 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 
    }
})

如果你想检查用户是否滚动到文档/ 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;
}

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

2 个答案: