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>

视差滚动效果很好但是＆＃34; window.screen.width＆＃34;浏览器忽略该命令。意思是：对于小于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);

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

3 个答案: