javascript - Prevent Address-Bar hiding in mobile Browsers

Question

I'm currently working on a website with a horizontal layout. All elements are position:absolute with javascript. Their size is calculated with window.innerHeight. My Problem is that despite the elements are no higher than the window's height, I can scroll down (height of the addressbar). This is annoying in two ways. First it triggers the window-resize event which I neither want nor need at that time. And Second it does not play well with some content boxes whose content should be scrollable vertically. Sometime I can scroll the boxes, but sometimes the whole page is scrolled first (as said before: height of the addressbar). Is there any solution which would allow me to prevent this address-bar auto-hiding mechanism on all devices.

Thank in advance!

This is not scrollable at all:http://maxeffenberger.de/test.html

This can be scrolled horizontally (makes sense to see hidden content) BUT also vertically until the addressbar is hidden (makes no sense, as there is no additional "vertical" content that would need more space: http://maxeffenberger.de/test2.html

question from:https://stackoverflow.com/questions/18061308/prevent-address-bar-hiding-in-mobile-browsers

Answer 1

This is the way I have achieved it:

html {
  background-color: red;
  overflow: hidden;
  width: 100%;
}

body {
  height: 100%;
  position: fixed;
  /* prevent overscroll bounce*/
  background-color: lightgreen;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  /* iOS velocity scrolling */
}