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

Question

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

<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”命令。 意思是：小于800像素的屏幕也启用了视差滚动。

任何帮助表示赞赏！

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);

Answer 2

window.screen让您获得显示器的大小。

您想要的是视口的大小，可通过以下方式访问：

// width
window.innerWidth
// height
window.innerHeight

Answer 3

你应该试试这个

if (window.matchMedia('(min-width: 800px)').matches) {
  function parallax() {
        var parallax = document.getElementById("box01");
        parallax.style.top = -(window.pageYOffset / 4) + "px";

    }
} else {};
window.addEventListener("scroll", parallax, false);