如何检测溢出是否已滚动到底

Question

我正在制作一个条款和条件页面，它在移动设备上使用溢出。我正在尝试创建一个函数，它将检测用户何时滚动到底部，以及是否有效地启用我的提交按钮。问题是我不知道如何用Javascript检测这种类型的用户输入，如果有人能对此有所了解，我真的会通知它

.mainContainer {
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
.txtContainer {
height: 250px;
overflow-y: auto;
}
.btnContainer {
margin-top: 20px;
}
.btn {
width: 100%;
height: 60px;
font-size: 20px;
}

<div class="mainContainer">
<div class="txtContainer">
<p>Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... </p>
</div>
<div class="btnContainer">
<button class="btn" disabled>Submit</button>
</div>
</div>

提前感谢，斯普德。

Answer 1

这将检测对象的滚动并默认禁用按钮，然后一旦按钮到达底部，它将启用按钮。如果用户向上滚动，该按钮将被禁用，但如果不是您想要的，则很容易覆盖。

var txt = document.querySelector(".txtContainer");
var btn = document.querySelector(".btn");
txt.addEventListener("scroll",function(e){
btn.disabled = true;
if(e.target.offsetHeight + e.target.scrollTop == e.target.scrollHeight){
btn.disabled = false;
}
});

.mainContainer {
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
.txtContainer {
height: 250px;
overflow-y: auto;
}
.btnContainer {
margin-top: 20px;
}
.btn {
width: 100%;
height: 60px;
font-size: 20px;
}

<div class="mainContainer">
<div class="txtContainer">
<p>Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... </p>
</div>
<div class="btnContainer">
<button class="btn" disabled>Submit</button>
</div>
</div>