使用scroll事件侦听器声明scroll位置变量
使用scroll事件侦听器声明scroll位置变量
提问于 2018-06-11 08:06:38
我在使用scroll事件侦听器的视差效果和各种类型的淡入淡出和调整大小的动画中获得了很多乐趣，有点像这样：
window.addEventListener('scroll', function() {
var i = window.pageYOffset;
var w = window.innerWidth;
var h = window.innerHeight;
//a bunch of various functions
//making things move on the page
});我所做的所有事情都很大程度上依赖于跟踪这三个值，并且我必须对每个函数执行scroll事件调用，就是在函数中重新声明这些变量。我理解为什么(某种程度上，只是现在不要我来解释:P )但是我想知道是否有一种方法可以重写代码，这样这些变量只需要声明一次，不同的函数就可以访问这些数据，而不需要告诉函数自我更新……这是有道理的，对吧？
编辑:更具体地说，我目前是如何设置的：
function someFunction() {
var i = window.pageYOffset;
var w = window.innerWidth;
var h = window.innerHeight;
//things happen
}
function someOtherFunction() {
var i = window.pageYOffset;
var w = window.innerWidth;
var h = window.innerHeight;
//more things happen
}
window.addEventListener('scroll', function() {
var i = window.pageYOffset;
var w = window.innerWidth;
var h = window.innerHeight;
someFunction();
someOtherFunction();
});当我开始添加所有这些事件时，我最初确实拥有这些函数在事件侦听器函数中所做的所有事情，在这种情况下，我不需要重新声明任何东西，但是后来我添加了@media查询，所有东西都崩溃了。我想出的最好的修复方法是一系列if/else if语句，用于根据屏幕大小更改滚动函数的行为。这使得整个过程非常重复，因此，我现在有了上面的代码。在本例中，我得到了一个“未引用”错误，因为i、w和h是在事件侦听器调用的函数的作用域之外声明的。
注意:我刚刚尝试了--可能是第四次，但我完全支持三重和四重检查--将这些变量放在顶部，放在所有东西之外，这也不起作用。只有当我为每个需要使用的实例重新声明变量时，它才能起作用。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-11 09:13:54
将变量声明移到函数外部，使其成为全局变量。否则，您只能在声明它们的函数中访问它们。
// variables global now -- yay
// declaring variables here means that they exist past the scroll event handler
var i, w, h;
function someFunction() {
//things work
}
function someOtherFunction() {
//more things work
}
window.addEventListener('scroll', function() {
i = window.pageYOffset;
w = window.innerWidth;
h = window.innerHeight;
someFunction();
someOtherFunction();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50789099
复制相关文章
相似问题