javascript - 仅当最小宽度为 800px 时才执行 Javascript

Question

对于我的项目，仅当屏幕尺寸等于或大于 800 像素时，我才需要视差滚动效果。为此，我编写了以下代码:

<script>
    if (window.screen.width >= 800) {
        function parallax() {
            var parallax = document.getElementById("box01");
            parallax.style.top = -(window.pageYOffset / 4) + "px";

        }
    }

    window.addEventListener("scroll", parallax, false);

</script>

视差滚动效果很好，但浏览器会忽略“window.screen.width”命令。意思是:视差滚动也适用于小于 800px 的屏幕。

感谢任何帮助!

Answer 1

您要找的是window.matchMedia .

function executeIfMinWidth800 (e) {
  if (window.matchMedia('(min-width: 800px)').matches) {
    // do stuff
  }
}

// call initially
executeIfMinWidth800();

// add handler for resize
window.addEventListener('resize', executeIfMinWidth800);