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

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