How to detect iOS7 Safari height change on scrolling - JavaScript

Question

In Safari on iPhone iOS7 a scroll down will show the menus at the top and bottom and a scroll up will hide them - effectively changing the height of the screen.

How do I listen for this slight change in height?

I have an element that changes height depending on the height of the screen, but in iOS7 it's not really behaving well.

Answer 1

To listen to window resize events we can use window.addEventListener("resize", myFunction); or using jQuery $(window).resize(myFunction());

I had a related problem but reversed -- a small window resize that happens on-scroll on iOS devices was unnecessarily triggering my on-resize logic.

One workaround can be just ignoring a small vertical resize (approx 40px should be ok)

An example solution (using jQuery)

  const ignoreVerticalResizeTreshold= 40;
  let vpHeight= 0;
  let vpWidth= 0;
  

  $(window).resize(function() {


      // Do stuff (on any window resize event)


      // return if no horizontal resize happened and vertical resize is below the set treshold
      if ($(window).innerWidth() === vpWidth && (($(window).innerHeight() >= (vpHeight - ignoreVerticalResizeTreshold / 2)) || ($(window).innerHeight() <= (vpHeight + ignoreVerticalResizeTreshold / 2)))) {
        return;
      }
  
  
      // Do more stuff
  
  
      vpHeight = $(window).innerHeight();
      vpWidth = $(window).innerWidth();

  });