[英]How do I get my matchMedia to work inside of my resize event listener?
我有TweenLite將startTrigger設置為x像素,具體取決於matchMedia大小。 我希望這個matchMedia在瀏覽器調整大小時觸發,所以我添加了一個事件監聽器。 它沒有運行,因為我必須重新加載頁面才能觸發matchMedia。
我已經嘗試將matchMedia代碼插入到我的resize事件監聽器中,該監聽器也處理我的元素的頂部位置。
var triggerOffset2 = document.documentElement.clientHeight / 2 + 44;
var cardHeight2 = $('#card2').outerHeight(true) / 2 + 22;
var duration2 = 1000;
var requestId2 = null;
window.addEventListener("resize", function() {
var sceneStart2;
if (window.matchMedia("(min-width: 1024px)").matches) {
sceneStart2 = 5000
} else {
sceneStart2 = 7000
}
console.log(sceneStart2);
triggerOffset2 = document.documentElement.clientHeight / 2 + 44;
TweenLite.set(".contain2", {
top: triggerOffset2 - cardHeight2
});
TweenLite.set(".timeline-trigger", {
top: triggerOffset2
});
});
var sceneStart2;
if (window.matchMedia("(min-width: 1024px)").matches) {
sceneStart2 = 5000
} else {
sceneStart2 = 7000
}
console.log(sceneStart2);
TweenLite.set(".contain2", {
top: triggerOffset2 - cardHeight2
});
TweenLite.set(".timeline-trigger", {
top: triggerOffset2
});
TweenLite.set(".start-trigger", {
top: sceneStart2
});
TweenLite.set(".end-trigger", {
top: sceneStart2 + duration2
});
// SCROLL MAGIC!!!
var tl2 = new TimelineMax({ paused: true })
.set(".card2", { }, sceneStart2)
.to(".card2", duration2, { rotationY: 180 }, sceneStart2)
.set(".card2", { })
// Only update on animation frames
window.addEventListener("scroll", function() {
if (!requestId2) {
requestId2 = requestAnimationFrame(update2);
}
});
update2();
// Set timeline time to scrollTop
function update2() {
tl2.time(window.pageYOffset + triggerOffset2);
requestId2 = null;
}
調整瀏覽器大小以更改.contain2的頂部位置和sceneStart2的數字時,matchMedia應該觸發
您應該使用matchMedia
提供的本機addListener
方法,而不是將addEventListener
綁定到window
的resize事件。
來自MDN :
MediaQueryList接口的addListener()方法向MediaQueryListener添加一個偵聽器,該偵聽器將運行自定義回調函數以響應媒體查詢狀態的變化。
我會在JavaScript
的頂部一次聲明sceneStart2
。 它的值將由內置監聽器更新,您可以從代碼中刪除所有其他matchMedia
邏輯。
這是一個精簡的示例供您查看。 通過一些工作,您應該能夠將其集成到您的代碼中。 要演示,請打開下面的“整頁”預覽。
var sceneStart2; var output = document.querySelector('.output > span'); var minWidthMatch = window.matchMedia("(min-width: 1024px)"); function getSceneStartValue(mediaQueryList) { sceneStart2 = mediaQueryList.matches ? 5000 : 7000; displayOutput(); } function displayOutput() { output.innerHTML = sceneStart2; } minWidthMatch.addListener(getSceneStartValue); window.onload = getSceneStartValue(minWidthMatch);
span { font-weight: bold; }
<p>Resize the browser to dynamically change value.</p> <div class="output">Value of <code>sceneStart2</code> = <span></span></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.