1

我只想在视口宽度大于设定值时运行脚本。我还希望在浏览器调整大小并根据需要禁用/启用时进行检查。我尝试使用matchMedia而不是检查每个像素来实现这一点，脚本仅在视口小于/大于设定值时触发。

如果我加载一个狭窄的视口（小于 1080 像素），JS 不会触发 - 完美！将视口扩大到大于 1080 像素的宽度然后运行脚本 - 也很完美！

我遇到的问题是当我从较大的视口（大于 1080 像素）缩小到窄/小时。在我刷新页面之前，该脚本仍然有效 - 我希望有人可以帮助我。

顺便说一句，是否可以根据需要更改const mediaQuery = window.matchMedia('(min-width: 1080px)') 以包含最小高度或更复杂的媒体查询（对此不是必需的）。

我的脚本：

const mediaQuery = window.matchMedia('(min-width: 1080px)')

function viewportChange(e) {
  // Check if the media query is true
  if (e.matches) {
    
    $(document).ready(function() {
    
      var num_children = $('.split-loop__left').children().length;
      var child_height = $('.split-loop__right').height() / num_children;
      var half_way = num_children * child_height / 2;
      $(window).scrollTop(half_way);
    
      function crisscross() {
          
          var parent = $(".split-loop");//.first();
          var clone = $(parent).clone();
          
          var leftSide = $(clone).find('.split-loop__left');
          var rightSide = $(clone).find('.split-loop__right');
    
          if (window.scrollY > half_way ) {
              //We are scrolling up
              $(window).scrollTop(half_way - child_height);
              
              var firstLeft = $(leftSide).children().first();
              var lastRight = $(rightSide).children().last();
              
              lastRight.appendTo(leftSide);
              firstLeft.prependTo(rightSide);
    
          } else if (window.scrollY < half_way - child_height) {
    
              var lastLeft = $(leftSide).children().last();
              var firstRight = $(rightSide).children().first();
              
              $(window).scrollTop(half_way);
              lastLeft.appendTo(rightSide);
              firstRight.prependTo(leftSide);
          }
    
          $(leftSide).css('bottom', '-' + window.scrollY + 'px');
          $(rightSide).css('bottom', '-' + window.scrollY + 'px');
    
          $(parent).replaceWith(clone);        
      }
      
      $(window).scroll(crisscross);
    
    });
  }
}

// Register event listener
mediaQuery.addListener(viewportChange)

// Initial check
viewportChange(mediaQuery)
4

0 回答 0