0

I have a website with a menu. Sometimes the menu content is overflowing it's container and i need it to to be scrollable. It works fine on a pc. Yet on an iphone what happens is that when i try to scroll the menu, it scrolls the whole body instead. As a result, the entire view is being dragged down/up reveling a grey area at the top/bottom of the screen. This happens mostly in portrait mode, for some reason. In landscape, if i go easy on the swiping, i am able to scroll the menu content alone while the rest of the body stays put.

Can anyone help with that?

Thank you!!

<html>
<style>
   #menu {
      overflow: scroll;
   }
</style>
<body>
   <div id="menu">
      --content--
   </div>
   <div id="mainPage">
      --content--
   </div>
</body>
</html>
yogev
  • 159
  • 9
  • Could you put your code uo? – Alan Dunning Oct 05 '14 at 10:23
  • not really... it's a part of a really huge web-app... – yogev Oct 05 '14 at 12:07
  • Ok, when you to mobile is your menu a side drawer style one, which when you scroll you only want the menu to scroll and not the rest of your page? – Alan Dunning Oct 05 '14 at 12:10
  • yes. But i feel like i need to be more specific: I use jQuery to disable the scroll of the page as the menu opens. Yet there is a feature of the Safari browser (i guess) to scroll the entire web page leaving a gray spacing, when you try to scroll more then the page's height. THAT is what prevents me from scrolling the menu's content, I think. – yogev Oct 05 '14 at 12:22
  • Are you menu (what you want to scroll) and you content (what you don't want to scroll) in the same container? If so this could ne your problem. I prefer to have menu outside of the container, then you can just do overflow: scroll on the menu without having to worry about any content scrolling that you don't want to. – Alan Dunning Oct 05 '14 at 12:24
  • no. I will now post an edit to my question to try and guideline how my html looks like – yogev Oct 05 '14 at 12:30
  • You could just add a class with javascript/jquery to
    when the menu is open with position: fixed set on it. So when is open it will have position: scroll for its style and
    will have position fixed. You can remove this class you added when the menu is closed so you will can rid of the position fixed.     – Alan Dunning Oct 05 '14 at 12:42

1 Answers1

0

This link could possibly help you... Hope it helps and good luck! :)

Background position not functioning as expected on Safari

Or just add this in the div's class

background-position-x: 50%; (This will hopefully resolve your issue with the Safari browser) background-position-y: 0%; (This will hopefully resolve your issue with the Safari browser) background-position: center top; (This should work on the PC)

Community
  • 1
  • 1