检测浏览器窗口何时从一定大小调整为更大尺寸？

Question

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

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存储为最后一个,用于下一次调整大小.