Background scrolling behind position:fixed; on iOS

Onotoley

So here's my problem:

  • Add a header bar of 60px height with a popup menu toggler
  • Add enough content on the page to scroll When toggle popup menu - add overflow-y: hidden to html and/or body and position: fixed to the popup.
  • Idea is that when I open the menu popup - I must have only the popup as scrollable area and not be able to scroll the background while the popup is open

Result:

  • On iOS (iphone/ipad) the background scrolls, especially when the popup reaches the end of scroll.
  • Also on iOS (iphone/ipad) if I touchmove on the header bar - the page scrolls on background only
  • Popup does not always go to the end of the viewport (mostly on iOS) after scroll. This issue is present partially on Android devices too.
  • Momentum effect makes the header move (should not).

Here's a snippet with the code.

$('.dropdown-toggle').click(function(){
  $('body').toggleClass('menu-dropdown-expanded');
})
body, ul {
  margin: 0;
  padding: 0;
}
.navbar {
  height: 60px;
  background: wheat;
}
.dropdown-window {
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  height: calc(100% - 60px);
  background-color: #e7e7e7;
  display: none;
  -webkit-overflow-scrolling: auto;
  overflow-y: scroll;
}
.menu-dropdown-expanded {
  overflow-y: hidden;
}
.menu-dropdown-expanded .dropdown-window {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
  <ul class="main-menu">
    <li>
      <a href="#" class="dropdown-toggle">Dropdown toggle</a>
      <div class="dropdown-window">
        <ul>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
          <li><a href="#">Some item</a></li>
        </ul>
      </div>
    </li>
  </ul>
</div>
<div class="my-content">
  <p>Lorem ipsum dolor sit amet, vis viris inermis voluptatibus ad, ex ius elitr feugiat. Partem ignota temporibus ea vel, ius mentitum imperdiet in. Ius an clita ancillae placerat, sed graeci adolescens no. Utinam adolescens ullamcorper ea vix. Mel ipsum constituam te. Eu usu hendrerit eloquentiam, te case habeo porro vix.</p>

  <p>Mea eu homero munere molestie. Sea facilisi signiferumque ea, mea an labore laboramus liberavisse. Sit ea nemore verear, nec posse populo virtute an. Ne pro nobis impetus. Nec cu vidit rebum augue. Aeque accommodare ne has. Ut vel graece persius bonorum, nam te inimicus persecuti, no pri dicta facilisis philosophia.</p>

  <p>Errem accusata recusabo nec ne, at sed causae vivendo, possim detracto expetendis est id. Sit te mutat mazim dolorem, mel ei euripidis neglegentur. Usu eirmod integre minimum et, est mutat docendi delicata in. Qui nihil possit ei, cu nostrud eleifend liberavisse vim.</p>

  <p>Ignota apeirian gloriatur at vel. Facete aliquid vulputate te duo, ea viderer placerat nec, est eu alienum posidonium dissentiet. Vis eu brute vocibus ponderum, animal omittantur usu cu. Wisi quas te per. Nec no vidit homero, saperet euripidis duo ut, at meis legendos maluisset per.</p>

  <p>Simul iisque elaboraret ut pro. Minim euismod mei ei. Mei dolorem perpetua no. Quo viris admodum at. Ea vim harum apeirian delicata, ut sed interesset necessitatibus, copiosae petentium cu sit.</p>

  <p>Nibh corpora invenire ne mea. Mei copiosae constituam te, te ius aeterno legendos pertinax, cu sed fugit hendrerit. Te quodsi comprehensam has, ea vel latine singulis consetetur. Est tation ancillae an, id vim quas vocibus. An mei amet quaeque evertitur, ridens apeirian ad eos. Ut nec minimum pertinax, eu vim veri lorem oportere.</p>

  <p>Facer aliquam eos an, pri ex ipsum forensibus. No iusto dicit nam, ridens maluisset usu et. Sed detracto salutandi in, vis ex falli aliquip rationibus. Cu vim eirmod dolorem eligendi. His ea purto graece, feugiat forensibus vituperata ne est. Deleniti vulputate nam id, in labore euripidis omittantur nec.</p>

  <p>Duo an regione phaedrum, mazim homero assueverit mel et. Illud adipisci cu his, et error invenire est. Invidunt efficiantur vis no, in vix mollis vocent, vitae debitis in his. Ne aperiri detracto molestie eam, illum euismod nonumes eos ei. Ea unum volutpat mediocritatem mei, eu nam novum oporteat eloquentiam. Quo ad iusto oporteat ocurreret.</p>

  <p>Unum labores instructior quo ex, ius te diam viris reprehendunt. Eum debitis vocibus deterruisset eu. Ubique splendide repudiandae ex mea. Ex quo quem omnesque torquatos. Vim ea legere salutatus, at qui dolor sanctus habemus.</p>

  <p>Tibique assueverit conclusionemque ut nec, quo illud gubergren ad. Mea commodo invenire ea, ius id oblique virtute constituto, his justo erant vidisse ut. Enim persius quo no, et pro ubique nonumes facilis. Ex vim malis deterruisset, eu diceret honestatis per, mea duis prompta molestiae no. Vim modus lobortis vulputate et, sit posse sententiae honestatis ea, duo cu detraxit reformidans. Et pro summo harum tritani, scripta accusam id mel, nam dicat iudico ex. Choro concludaturque id sed, has suas noster ne, ne aeque quidam mel.</p>
</div>

Do note that the issues are not visible by runing the code on codepen.

I am sure this may be tagged as duplicate but after a week of research I still did not find any solution. I am not best with native js so I prefer using jQuery.

UPDATE:

As of Hieren feb's answer, all my issues are caused by the existance of Momentum scrolling of iOS. Putting position: fixed to body when popup is activated fixes the issue.

Hieren feb

I think this issue from the overscroll on ios, you should disable it when display the popup.

$( document ).ready(function() {
  $('.dropdown-toggle').click(function(){
    // Add class to `html` tag instead of `body` tag
    $('html').toggleClass('menu-dropdown-expanded');
  })  
});
body, ul {
  margin: 0;
  padding: 0;
}

.navbar {
  height: 60px;
  background: wheat;
}

.dropdown-window {
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  height: calc(100% - 60px);
  background-color: #e7e7e7;
  display: none;
  -webkit-overflow-scrolling: auto;
  overflow-y: scroll;
}

/* Prevent overscroll/bounce in iOS MobileSafari by CSS */
.menu-dropdown-expanded,
.menu-dropdown-expanded body {
  position: fixed;
  overflow: hidden;
}

.menu-dropdown-expanded .dropdown-window {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="navbar">
  <ul class="main-menu">
    <li>
      <a href="#" class="dropdown-toggle">Dropdown toggle</a>
      <div class="dropdown-window">
        <ul>
          <li class="item1">item 1</li>
          <li class="item2">item 2</li>
          <li class="item3">item 3</li>
          <li class="item4">item 4</li>
          <li class="item5">item 5</li>
          <li class="item6">item 6</li>
          <li class="item7">item 7</li>
          <li class="item8">item 8</li>
          <li class="item9">item 9</li>
          <li class="item10">item 10</li>
          <li class="item11">item 11</li>
          <li class="item12">item 12</li>
          <li class="item13">item 13</li>
          <li class="item14">item 14</li>
          <li class="item15">item 15</li>
          <li class="item16">item 16</li>
          <li class="item17">item 17</li>
          <li class="item18">item 18</li>
          <li class="item19">item 19</li>
          <li class="item20">item 20</li>
          <li class="item21">item 21</li>
          <li class="item22">item 22</li>
          <li class="item23">item 23</li>
          <li class="item24">item 24</li>
          <li class="item25">item 25</li>
          <li class="item26">item 26</li>
          <li class="item27">item 27</li>
          <li class="item28">item 28</li>
          <li class="item29">item 29</li>
          <li class="item30">item 30</li>
          <li class="item31">item 31</li>
          <li class="item32">item 32</li>
          <li class="item33">item 33</li>
          <li class="item34">item 34</li>
          <li class="item35">item 35</li>
          <li class="item36">item 36</li>
          <li class="item37">item 37</li>
          <li class="item38">item 38</li>
          <li class="item39">item 39</li>
          <li class="item40">item 40</li>
          <li class="item41">item 41</li>
          <li class="item42">item 42</li>
          <li class="item43">item 43</li>
          <li class="item44">item 44</li>
          <li class="item45">item 45</li>
          <li class="item46">item 46</li>
          <li class="item47">item 47</li>
          <li class="item48">item 48</li>
          <li class="item49">item 49</li>
          <li class="item50">item 50</li>
          <li class="item51">item 51</li>
          <li class="item52">item 52</li>
          <li class="item53">item 53</li>
          <li class="item54">item 54</li>
          <li class="item55">item 55</li>
          <li class="item56">item 56</li>
          <li class="item57">item 57</li>
          <li class="item58">item 58</li>
          <li class="item59">item 59</li>
          <li class="item60">item 60</li>
          <li class="item61">item 61</li>
          <li class="item62">item 62</li>
          <li class="item63">item 63</li>
          <li class="item64">item 64</li>
          <li class="item65">item 65</li>
          <li class="item66">item 66</li>
          <li class="item67">item 67</li>
          <li class="item68">item 68</li>
          <li class="item69">item 69</li>
          <li class="item70">item 70</li>
          <li class="item71">item 71</li>
          <li class="item72">item 72</li>
          <li class="item73">item 73</li>
          <li class="item74">item 74</li>
          <li class="item75">item 75</li>
          <li class="item76">item 76</li>
          <li class="item77">item 77</li>
          <li class="item78">item 78</li>
          <li class="item79">item 79</li>
          <li class="item80">item 80</li>
          <li class="item81">item 81</li>
          <li class="item82">item 82</li>
          <li class="item83">item 83</li>
          <li class="item84">item 84</li>
          <li class="item85">item 85</li>
          <li class="item86">item 86</li>
          <li class="item87">item 87</li>
          <li class="item88">item 88</li>
          <li class="item89">item 89</li>
          <li class="item90">item 90</li>
          <li class="item91">item 91</li>
          <li class="item92">item 92</li>
          <li class="item93">item 93</li>
          <li class="item94">item 94</li>
          <li class="item95">item 95</li>
          <li class="item96">item 96</li>
          <li class="item97">item 97</li>
          <li class="item98">item 98</li>
          <li class="item99">item 99</li>
          <li class="item100">item 100</li>
        </ul>
      </div>
    </li>
  </ul>
</div>
<div class="my-content">
  <p>Lorem ipsum dolor sit amet, vis viris inermis voluptatibus ad, ex ius elitr feugiat. Partem ignota temporibus ea vel, ius mentitum imperdiet in. Ius an clita ancillae placerat, sed graeci adolescens no. Utinam adolescens ullamcorper ea vix. Mel ipsum constituam te. Eu usu hendrerit eloquentiam, te case habeo porro vix.</p>

  <p>Mea eu homero munere molestie. Sea facilisi signiferumque ea, mea an labore laboramus liberavisse. Sit ea nemore verear, nec posse populo virtute an. Ne pro nobis impetus. Nec cu vidit rebum augue. Aeque accommodare ne has. Ut vel graece persius bonorum, nam te inimicus persecuti, no pri dicta facilisis philosophia.</p>

  <p>Errem accusata recusabo nec ne, at sed causae vivendo, possim detracto expetendis est id. Sit te mutat mazim dolorem, mel ei euripidis neglegentur. Usu eirmod integre minimum et, est mutat docendi delicata in. Qui nihil possit ei, cu nostrud eleifend liberavisse vim.</p>

  <p>Ignota apeirian gloriatur at vel. Facete aliquid vulputate te duo, ea viderer placerat nec, est eu alienum posidonium dissentiet. Vis eu brute vocibus ponderum, animal omittantur usu cu. Wisi quas te per. Nec no vidit homero, saperet euripidis duo ut, at meis legendos maluisset per.</p>

  <p>Simul iisque elaboraret ut pro. Minim euismod mei ei. Mei dolorem perpetua no. Quo viris admodum at. Ea vim harum apeirian delicata, ut sed interesset necessitatibus, copiosae petentium cu sit.</p>

  <p>Nibh corpora invenire ne mea. Mei copiosae constituam te, te ius aeterno legendos pertinax, cu sed fugit hendrerit. Te quodsi comprehensam has, ea vel latine singulis consetetur. Est tation ancillae an, id vim quas vocibus. An mei amet quaeque evertitur, ridens apeirian ad eos. Ut nec minimum pertinax, eu vim veri lorem oportere.</p>

  <p>Facer aliquam eos an, pri ex ipsum forensibus. No iusto dicit nam, ridens maluisset usu et. Sed detracto salutandi in, vis ex falli aliquip rationibus. Cu vim eirmod dolorem eligendi. His ea purto graece, feugiat forensibus vituperata ne est. Deleniti vulputate nam id, in labore euripidis omittantur nec.</p>

  <p>Duo an regione phaedrum, mazim homero assueverit mel et. Illud adipisci cu his, et error invenire est. Invidunt efficiantur vis no, in vix mollis vocent, vitae debitis in his. Ne aperiri detracto molestie eam, illum euismod nonumes eos ei. Ea unum volutpat mediocritatem mei, eu nam novum oporteat eloquentiam. Quo ad iusto oporteat ocurreret.</p>

  <p>Unum labores instructior quo ex, ius te diam viris reprehendunt. Eum debitis vocibus deterruisset eu. Ubique splendide repudiandae ex mea. Ex quo quem omnesque torquatos. Vim ea legere salutatus, at qui dolor sanctus habemus.</p>

  <p>Tibique assueverit conclusionemque ut nec, quo illud gubergren ad. Mea commodo invenire ea, ius id oblique virtute constituto, his justo erant vidisse ut. Enim persius quo no, et pro ubique nonumes facilis. Ex vim malis deterruisset, eu diceret honestatis per, mea duis prompta molestiae no. Vim modus lobortis vulputate et, sit posse sententiae honestatis ea, duo cu detraxit reformidans. Et pro summo harum tritani, scripta accusam id mel, nam dicat iudico ex. Choro concludaturque id sed, has suas noster ne, ne aeque quidam mel.</p>
</div>

That's what I think, please check and keep me updated

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to disable background content scrolling in position fixed

From Dev

Overflow scrolling not working on position fixed element iOS

From Dev

How can I insert an imageView behind a UITableView in a fixed position (no scrolling)?

From Dev

White area on fixed background when scrolling on ios

From Dev

Position absolute but with fixed scrolling

From Dev

Content behind Position: fixed is intractable

From Dev

position: fixed with background image?

From Dev

Phonegap (Cordova) Scrolling with a data-position="fixed" header/footer only ios scrolling issue

From Dev

#sidebar position:fixed at certain scrolling

From Dev

Background Image not remaining fixed on scrolling

From Dev

fixed page, content scrolling behind header

From Dev

set background color of class while scrolling and also the class is must in fixed position

From Dev

Make fixed position div scrollable without scrollbar and without scrolling the background content

From Dev

set background color of class while scrolling and also the class is must in fixed position

From Dev

iOS Safari issue - Element becomes invisible while scrolling when changing position absolute to fixed

From Dev

Background position fixed not working in firefox

From Dev

Change background color if position fixed

From Dev

Horizontal scrolling not working when position absolute/fixed

From Dev

macgap scrolling issue when position fixed

From Dev

Flex Layout with fixed position (no scrolling) sidebar

From Dev

Fixed position element is flashing in Chrome when scrolling

From Dev

Position fixed sidebar with overflow scroll not scrolling to bottom

From Dev

JQuery Position:Fixed 'NAVBAR' by scrolling the page

From Dev

Scrolling with a button which should have a fixed position

From Dev

How to detect scrolling in div when position is fixed

From Dev

How to Stop Jumping Position fixed element on scrolling

From Dev

How to Stop Jumping Position fixed element on scrolling

From Dev

JQuery Position:Fixed 'NAVBAR' by scrolling the page

From Dev

macgap scrolling issue when position fixed

Related Related

  1. 1

    How to disable background content scrolling in position fixed

  2. 2

    Overflow scrolling not working on position fixed element iOS

  3. 3

    How can I insert an imageView behind a UITableView in a fixed position (no scrolling)?

  4. 4

    White area on fixed background when scrolling on ios

  5. 5

    Position absolute but with fixed scrolling

  6. 6

    Content behind Position: fixed is intractable

  7. 7

    position: fixed with background image?

  8. 8

    Phonegap (Cordova) Scrolling with a data-position="fixed" header/footer only ios scrolling issue

  9. 9

    #sidebar position:fixed at certain scrolling

  10. 10

    Background Image not remaining fixed on scrolling

  11. 11

    fixed page, content scrolling behind header

  12. 12

    set background color of class while scrolling and also the class is must in fixed position

  13. 13

    Make fixed position div scrollable without scrollbar and without scrolling the background content

  14. 14

    set background color of class while scrolling and also the class is must in fixed position

  15. 15

    iOS Safari issue - Element becomes invisible while scrolling when changing position absolute to fixed

  16. 16

    Background position fixed not working in firefox

  17. 17

    Change background color if position fixed

  18. 18

    Horizontal scrolling not working when position absolute/fixed

  19. 19

    macgap scrolling issue when position fixed

  20. 20

    Flex Layout with fixed position (no scrolling) sidebar

  21. 21

    Fixed position element is flashing in Chrome when scrolling

  22. 22

    Position fixed sidebar with overflow scroll not scrolling to bottom

  23. 23

    JQuery Position:Fixed 'NAVBAR' by scrolling the page

  24. 24

    Scrolling with a button which should have a fixed position

  25. 25

    How to detect scrolling in div when position is fixed

  26. 26

    How to Stop Jumping Position fixed element on scrolling

  27. 27

    How to Stop Jumping Position fixed element on scrolling

  28. 28

    JQuery Position:Fixed 'NAVBAR' by scrolling the page

  29. 29

    macgap scrolling issue when position fixed

HotTag

Archive