Add visual viewport API demo

[chrisdavidmills]

In mdn/content#34427, I have added documentation for the Visual Viewport API scrollend event, and a better demo to accompany this and related events.

This PR adds the full demo to the dom-examples repo. Once this is merged, I will update the content PR to point to this instead of the glitch page it currently points to.

[wbamberg]

I think this example has too much accidental complexity - that is, things I have to understand, that aren't part of the API being demonstrated. AIUI the basic point of the demo is to:

• keep the position of the "Total" box in the same place as we zoom
• indicate in-progress zoom and finished zoom by changing the background color.

But most of the actual code isn't this, it's logic around figuring out which boxes are visible, and that doesn't seem particularly relevant to the API. It also seems to be buggy:

...why is this showing me zero?

[chrisdavidmills]

@wbamberg OK, the code is now vastly simpler; left me know what you think. I'm reporting the visualViewport offsetTop and offsetLeft values, and the window scrollX and scrollY values with each scroll, resize and scrollend event fire, to show the difference in what happens when you scroll on desktop versus mobile.

The behavior is still a bit odd sometimes on mobile. The visual viewport position generally changes as expected, but sometimes the window scrolls in addition to that, or instead of it.

I'll update the code in the docs now as well.

[wbamberg]

👍 thank you Chris, much better IMO!