如何让我的matchMedia在我的resize事件监听器中工作？

Question

我有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应该触发

Answer 1

您应该使用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> 

的jsfiddle