FE Refinement (8 / ∞): html and body overflow settings + reactive app top bar to scrollbar

[cloudyyoung]

This PR fixes a list of niche things in order to develop the Dialog in #252 next.

Background

Current implementation only supports it to be fixed relative to the whole window. The reactive part of the AppTopBar monitors the value of window.scrollTop and decides its rendering. However, the AppTopBar needs to be a "fixed" element relative to arbitrary container, eg, fixed at the top within in a Dialog. So its scrolling monitoring mechanism must be able to monitor an arbitrary container rather than only window.

Because of the rubber band scrolling effect in all Apple systems. On touch screens, if html contains another scrollable div, the scrollable div sometimes freezes because the gesture is conflicting to scroll the entire html and thus freezes the scrollable div.

rpreplay-final1679743484_Yw64vGx9.mp4

Changes

1. Add overflow-hidden to html, tells browser that html is not scrollable so when gestures is scrolling something, it must not be html!
2. Make body scrollable because something must be scrollable...
3. The previous two points only applies on touch screens, it behaves the same as before when it's not touch screen
4. AppTopBar scrolling mechanism now monitors both window.scrollTop and the scroll position of an arbitrary container containerRef, whichever has value provided, so it works with both with or without a container provided

It also fixes the behaviour of ATB unintentionally and it's lovely:

Screen.Recording.2023-03-25.at.6.01.48.AM.mov

Screen.Recording.2023-03-25.at.6.02.45.AM.mov

[cloudyyoung]

This needs more work...