删除浏览器宽度的功能

Question

我对 javascript 还是很陌生，我在构建的同时也在学习。这可能是一个简单的修复，但是我如何在较小的宽度上禁用视差图像上的功能（或通常禁用特定的 js 功能）？

到目前为止，这是我所拥有的，但效果不太好，但显示“未定义”。几天来我一直在寻找解决方案，但没有运气。任何帮助将不胜感激。

  var paraLlaxS = document.querySelector("#firstImgc2");
  var paraLlaxS = document.querySelector("#secondImgc2");
  var paraLlaxS = document.querySelector("#backbox1");

  function setTranslate(xPos, yPos, el) {
      el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
  }

  window.addEventListener("DOMContentLoaded", scrollLoop, false);

  var xScrollPosition;
  var yScrollPosition;

  function scrollLoop() {

      xScrollPosition = window.scrollX;
      yScrollPosition = window.scrollY;

      setTranslate(0, yScrollPosition * -0.2, firstImgc2);
      setTranslate(0, yScrollPosition * 0.15, secondImgc2);
      setTranslate(0, yScrollPosition * -0.6, backbox1);

      requestAnimationFrame(scrollLoop); 


      if(window.innerWidth < 900) {
        document.querySelector('#firstImgc2').innerHTML = window.removeEventListener("DOMContentLoaded", scrollLoop, false);
        return;
      } else {

      }
}

Answer 1

您可以在函数的开头添加条件return。但是，如果宽度再次增加，您将需要监听以再次开始循环。

function scrollLoop() {
   if(window.innerWidth < 900)return;
   ...

Answer 2

我从另一个帖子中借用了一个解决方案。 Listen for browser width for responsive web design?

此代码与更多种类的浏览器兼容，因为获取的屏幕大小可能因浏览器而异。

var width = 0;
function getWindowSize() {
    if (document.body && document.body.offsetWidth) {
      width = document.body.offsetWidth;
    }
    if (document.compatMode=='CSS1Compat' &&
        document.documentElement &&
        document.documentElement.offsetWidth ) {
       width = document.documentElement.offsetWidth;
    }
    if (window.innerWidth) {
       width = window.innerWidth;
    }
    return(width);
}