hier ist also mein Problem:Hintergrund Scrollen hinter Position: behoben; auf iOS
- eine Kopfleiste von 60px Höhe mit einem Popup-Menü hinzufügen toggler
- hinzufügen genügend Inhalt auf der Seite klicken Wenn Toggle-Popup-Menü scrollen - Überlauf-y hinzufügen: versteckt zu HTML und/oder Körper und Position: behoben im Popup.
- Idee ist, dass, wenn ich das Menü Popup öffnen - ich nur den Popup als rollbarer Bereich haben muss und nicht in der Lage sein, den Hintergrund zu bewegen, während das Popup
Ergebnis offen ist:
- Auf iOS (iPhone/iPad) scrollt der Hintergrund, besonders wenn das Popup das Ende von scroll erreicht.
- Auch auf iOS (iphone/ipad) wenn ich berühre auf der Kopfzeile bewegen - die Seite scrollt nur im Hintergrund
- Popup nicht immer an das Ende des Darstellungsbereichs (meist auf iOS) nach scroll gehen. Dieses Problem tritt teilweise auch auf Android-Geräten auf.
- Momentum-Effekt bewegt den Header (sollte nicht).
Hier ist ein Ausschnitt mit dem 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>
Sie zu beachten, dass die Probleme von runing den Code nicht sichtbar sind auf codepen.
Ich bin sicher, dass dies als doppelt markiert werden kann, aber nach einer Woche der Forschung habe ich noch keine Lösung gefunden. Ich bin nicht am besten mit nativen js, also bevorzuge ich jQuery.
UPDATE:
Ab Hieren feb's answer, alle meine Fragen werden durch die Existenz von Momentum verursacht von iOS zu scrollen. Putting position: fixed to body, wenn das Popup aktiviert ist, behebt das Problem.
Wrapper div fügen Sie einfach nach dem Body-Tag und geben sie über: hidden auf Menü öffnen – spankajd
@spankajd dies nicht der Fall ist behebe das Problem – Onotoley
Ich konfrontiert das gleiche Problem und versuchte das gleiche, was mir geholfen hat. Ok auch Höhe hinzufügen: 100% mit Überlauf: versteckt, Wrapper Div. – spankajd