Chrome mobile ignoring overflow

问题

I'm playing around with creating a webapp for android. I've been using phonegap with JQM, but I've reached a problem.

I'm implementing a slide-in menu, and for that I've found a simple example on the internet.

http://www.aldomatic.com/jqm/fb-menu-style/

This simple menu slides in from the left, and that part works great, but when i try to slide it in i get a problem. The whole page scrolls, and this is despite me having

#mobileViewport {
    overflow: hidden;
}

(The body tag has the id of mobileViewport

I have tried adding it to the html tag too, but to no avail.

Is this a bug? and is there any workaround?

回答1:

By default, JQM pages are positioned absolutely, outside of the flow of their containing element (if the containing element is statically positioned).

Adding overflow:hidden on the containing element (body) is therefore not going to help.

If you apply position:relative to #mobileViewport that should cause the JQM mobile pages to now flow correctly from the containing element and the overflow:hidden should work.

However, I suspect that is probably not a good idea and bound to cause other CSS display issues. (I recall playing around with that myself one time and having other issues as a side-effect)

Probably a better idea is adding the overflow:hidden to the JQM page elements themselves.

<body class="ui-mobile-viewport">
  <div id="mypage" data-role="page" class="ui-page">
  ...
  </div>
</div>

#mypage {
   overflow:hidden;
}

NOTE: If you have a footer, you might want to apply the overflow:hidden to the child .ui-content element instead.

来源：https://stackoverflow.com/questions/14094433/chrome-mobile-ignoring-overflow

标签

android

html

css

jquery-mobile