Question

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

在上面的代码中，我使用我在此处找到的示例获取页面的高度：How to get height of entire document with JavaScript?

一旦用户滚动到页面底部的百分之十，我就会尝试触发事件。问题是scrollAmount无法达到height

的10％

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

Answer 1

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

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

尝试使用javascript在某些滚动高度上触发事件

1 个答案: