javascript - 检测浏览器窗口何时从特定大小调整为更大的大小？

Question

我想在浏览器窗口的大小从小于 641 像素的任何大小调整为更大的大小后重置特定元素。这是我试图实现的一个例子，用伪代码编写:

if (browser.window <= 641px && browser.window.resizedTo > 641px) {
  $( ".foo" ).removeClass( "bar" )
}

谢谢!

Answer 1

为了这个问题，我假设你的意思是 641px 作为宽度，但我也把 innerHeight 变量留在那里，以备不时之需:

// Closure last-height/width
var lastX = window.innerWidth
var lastY = window.innerHeight

function fooOnResize() {
   var x = window.innerWidth
   var y = window.innerHeight
   if (lastX <= 641 && 641 < x) {
      $(".foo").removeClass("bar")
   }
   lastX = x
   lastY = y
}

window.addEventListener("resize", fooOnResize)
// Also okay: window.onresize = fooOnResize

诀窍是基本上将最后一个大小保存在一些闭包变量中，然后在调整大小时，您可以进行比较。完成比较和工作后，将当前的 x/y 存储为最后一个，用于下一次调整大小。