尝试使用 javascript 在特定滚动高度上触发事件

Trying to trigger event on certain scroll height using javascript

本文关键字：高度 滚动 事件 javascript      更新时间：2023-09-26
var amount = document.getElementsByClassName("cart-total-qty")[0].innerHTML;
console.log(amount);
var body = document.body,
    html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );
var tenPercent = height*.9
window.addEventListener("scroll", function() {
    scrollAmount = window.scrollY;
    if(scrollAmount == tenPercent){
    alert("It's happening (Insert Ron Paul)");
    }
});

在上面的代码中，我使用我在这里找到的示例来获取页面的高度：如何使用 JavaScript 获取整个文档的高度？

然后，一旦用户滚动到页面的底部 10%，我就会尝试触发一个事件。问题是scrollAmount永远不会达到height的10%以内

在我的示例中，height返回为 1280，scrollAmount滚动时永远不会返回高于 1040 的返回，但奇怪的是，如果我更改浏览器的高度，当我滚动到底部时，我会得到不同的结果scrollAmount。

首先，预计scrollAmount将返回一个明显低于文档内容高度的值。如果你仔细观察，它的最大值实际上是（内容高度 - 窗口高度）。可以这样想：假设您的内容仅比可用窗口高度长一个像素，在这种情况下，最大scrollAmount应该是多少？我希望它是 1。因此，请将tenPercent = height*.9替换为tenPercent = (height-window.innerHeight)*.9

其次，您以 100px 左右的步长滚动。当然，可能存在一些动画，但是事件不会针对每个可能的scrollAmount值不断触发。在滚动过程中，scrollAmount不太可能完全等于 tenPercent .因此，请将scrollAmount == tenPercent替换为scrollAmount > tenPercent

相关文章：