iOS triggers scroll event on orientation change

Question

I have a section of my website that should be hidden when a user scrolls like:

$( window ).scroll(function() {
  $('header').addClass('colapsed');
});

The viewport is set to prevent scaling like:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

But whenever the orientation changes on iOS my on scroll callback is being called. Any idea how to overcome this?

PS: It works fine on Android

Answer 1

Keep track of the most recent orientation change. In your scroll callback, check if the current orientation matches the previous orientation; if it doesn't match, you know it's an orientation change so you can ignore it.