Question

我正在尝试更改我找到here的示例，以便它可以与onscroll而不是onclick一起使用。最终，使用闭包的原因是为了避免全局变量（在函数调用之间保持pageYOffset的最后一个值），但我将从这个简单的例子开始：

var element = document.getElementById('myobj');

element.onscroll = (function() {
    // init the count to 0
    var count = 0;
    return function(e) {
        //count
        count++;
        if (count === 3) {
            // do something every third time
            alert("Third time's the charm!");
            //reset counter
            count = 0;
        }
    };
})();

注意：最初，我将'myobj'定义为div，但之后我将其定义为

<body id='myobj'>

里面有一堆段落有一个滚动条（出于某种原因，div不起作用）。

使用chrome的调试器，我可以看到它在页面加载时通过代码，但这就是全部。滚动时没有任何反应。谁能解释一下为什么？谢谢！

Answer 1

有一个可行的解决方案，但在我的情况下不是解决方案。与CSS一起... 我没有提到身体，而是创造了一个div：

#div1 {
  border: 1px solid black;
  width:  250px;
  height: 100px;
  overflow-y: auto;
  margin-bottom: 120px;; 
}

和

var element = document.getElementById('div1');
element.onscroll = (function() {
    // init the count to 0
    var count = 0;
    return function(e) {
        //count
        count++;
        if (count === 3) {
            // do something every third time
            alert("Third scroll.");
            //reset counter
            count = 0;
        }
    };
})();

脚本正在运行。他的Sildoreth道具2 answer on "scroll for div"。不完全是我正在寻找的，因为我正在整个窗口工作，我仍然没有找到这种情况的解决方案。这很烦人，因为整个窗口（div或不是）有一个滚动条但它不会响应这个事件。

@kinakuta：我想过你所说的（document.onload处理程序），但我无法在那里找到解决方案，主要是因为它应该调用一个函数。对？在我看来，这个脚本更像是一个声明（尽管对函数进行了“隐式”调用）。

似乎我发现了 - 不会说明确的解决方案 - 但更接近我一直在寻找的东西。我仍然有div1元素，但改变了css，所以div使用了整个窗口（我尽可能地简化了css）：

#div1 {
  height: 3000px;
  overflow-y: auto;
}

并且，真正有所作为，而不是获得div1元素（如前所述），我正在获取窗口本身：

var element = document.defaultView;

（脚本上没有其他任何改变。）

不确定这是否是最值得推荐的方式，但它正在使用浏览器的滚动条（而不是之前的div）。

使用onscroll的闭包来保持pageYOffset的最后一个值

1 个答案: