Question

我正在遵循一个指南，该指南允许Google Map屏幕根据屏幕尺寸禁用滚动。我挣扎的唯一部分是编写代码，当我手动调整屏幕大小时，该代码可以动态更改True / False值。

这是我遵循说明的网站，但是我似乎无法根据屏幕尺寸https://coderwall.com/p/pgm8xa/disable-google-maps-scrolling-on-mobile-layout

编写正确的语法代码来生成动态的true false值。

我需要使用的部分代码：

$(window).resize()

然后：

setOptions()

所以我正在努力将它们组合在一起。

我尝试过这样的事情：

var dragging = $(window).width(function resize() {
    if (dragging > 560) {
        return true;
    } else {
        return false;
    }
});

Answer 1

您可以在调整大小事件中添加事件侦听器，并在更改窗口大小时设置变量的值：

var dragging = false;
window.addEventListener('resize', function(event) {
  dragging = window.innerWidth > 560;
});

由于您提到要在窗口大小扩展到某个值时禁用滚动，因此这样做可能会更容易。如果尝试使用，您可以在控制台中看到每当您调整窗口大小时该值都会更改）：

window.addEventListener('resize', function(event) {
  console.log(window.innerWidth);
  if (window.innerWidth > 560) {
    // disable scrolling or do whatever you want to do
  }
});

顺便说一句，在您的代码中，您可以执行以下操作：

 if (dragging > 560) {
     return true;
 } else {
     return false;
 }

您可以将其简化为：

return dragging > 560

完全相同。

Answer 2

您链接到的文章缺少重要信息，因为它没有提到$是（大概是）jQuery。但是您根本不需要jQuery。您可以改用MediaQueryList。它类似于CSS中的媒体查询，但它是一个JavaScript API。

以下是未经测试的示例，说明如何将其与MediaQueryList event listener一起使用。它会设置初始值，并使用使用Google Maps API中的setOptions的处理程序来监听媒体查询的更改。

var mql = window.matchMedia('(min-width: 560px)');
var isDraggable = mql.matches;

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    draggable: isDraggable
  });
}

function mqChange(e) {
  map.setOptions({draggable: !!e.matches});
}

mql.addListener(mqChange);

Answer 3

您可以使用此功能在调整屏幕大小时获取宽度和高度。

$(window).resize(function() {
    $windowWidth = $(window).width();
    $windowHeight = $(window).height();
    // run other functions or code
});

但是，如果您只想基于屏幕大小显示/隐藏html元素，则也可以使用纯html / css。

<div id="maps"></div>

Css：

@media only screen and (max-width: 560px) {
    #maps {
        display: none;
    }
}

Answer 4

只要媒体查询状态发生变化，您就可以使用matchMedia function运行回调

var mql = window.matchMedia('(min-width: 700px)');

function mediaHandler(e) {
   if (e.matches) {
      /* the viewport is more than 700 pixels wide */
   } else {
      /* the viewport is 700 pixels wide or less */
   }
}

mql.addListener(mediaHandler);

是/否取决于屏幕尺寸动态变化？

4 个答案: