Question

我有两个变量来计算clientHeight，除以2并加44。它当前正在按预期方式工作，除非调整窗口大小，需要刷新页面以重新计算clientHeight。刷新后，它将正确地重新定位div。如何重新调整窗口大小时每个的clientHeight，这样就无需刷新页面即可再次运行脚本并获取新高度？

这是基于滚动位置进行动画处理的动画的一部分。向下滚动页面时，div会动画。

var triggerOffset = document.documentElement.clientHeight / 2 + 44;
var cardHeight = $('#card').outerHeight(true) / 2 + 22;
var duration = 1000;
var requestId = null;

var sceneStart;
if (window.matchMedia("(max-width: 1080px)").matches) {
    sceneStart = 4000
} else {
    sceneStart = 4000
}
console.log(sceneStart); 

TweenLite.set(".contain", {
    top: triggerOffset - cardHeight
});

TweenLite.set(".timeline-trigger", {
    top: triggerOffset
});

TweenLite.set(".start-trigger", {
    top: sceneStart
});

TweenLite.set(".end-trigger", {
    top: sceneStart + duration
});

// SCROLL MAGIC!!!
var tl = new TimelineMax({ paused: true })
.set(".card", {  }, sceneStart)
.to(".card", duration, { rotationY: 180 }, sceneStart)
.set(".card", {  })

// Only update on animation frames
window.addEventListener("scroll", function() {
    if (!requestId) {
        requestId = requestAnimationFrame(update);
    }
});

update();

// Set timeline time to scrollTop
function update() {
    tl.time(window.pageYOffset + triggerOffset);
    requestId = null;
}

我希望调整窗口大小时可以调整卡的位置。当前，需要刷新窗口以重新计算。

Answer 1

您正在寻找window.onresize

window.addEventListener("resize", function() {
  triggerOffset = document.documentElement.clientHeight / 2 + 44;
});

Answer 2

您可以使用window.onresize global event listeners为它提供一个函数，该函数将简单地重新计算您的triggerOffset：

window.addEventListener("resize", function() {
  triggerOffset = document.documentElement.clientHeight / 2 + 44;

  TweenLit.set(...);
  TweenLit.set(...);
});

更新：

如果您使用多个脚本文件来执行相同的逻辑，则更好的解决方案是使用@ControlAltDel提供的'resize'事件。

在每个脚本文件中，您将添加事件监听器，并将逻辑放入回调中：

{{1}}

屏幕调整大小后如何重新计算变量？

2 个答案: