僅當最小寬度為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);