Een "plakkerig" item met vaste positie maken dat werkt op iOS Safari

Op iOS-safari genereert panning met één vinger geen gebeurtenissen totdat de gebruiker stopt met pannen. Een onscroll-gebeurtenis wordt alleen gegenereerd wanneer de pagina niet meer beweegt en opnieuw getekend wordt.

Ik heb een manier nodig om realtime scrollen te detecteren. Specifiek wil ik een plakkerig menu maken dat ook werkt op iOS-safari. Op niet-mobiele browsers kan het sticky-menu worden uitgevoerd door te schakelen tussen "relatieve positie" naar "vaste positie" op het element tijdens het luisteren naar de onscroll-evenementen. Deze methode werkt niet in een mobiele browser omdat onscroll-evenementen niet continu worden geactiveerd. Wat kan ik doen?

18
Een (zij het hacker-achtige) manier om het te implementeren, is om je eigen verticale pan-gebaar herkend te krijgen en toe te voegen aan de webweergave. Op die manier kunt u de eigenschap -staat gebruiken om evenementen te ontvangen.
toegevoegd de auteur CodaFi, de bron
binden om aanraken te verplaatsen en de y van de pagina te controleren
toegevoegd de auteur sciritai, de bron

5 antwoord

Answering my own question. iOS7 now support position:sticky Demo: http://html5-demos.appspot.com/static/css/sticky.html

11
toegevoegd

Oud onderwerp zeker, maar ik kan hier veel bezoeken zien. Als alles wat je wilt, een plakkerig menu is, kun je vaste positionering gebruiken. Geen behoefte aan iScroll daar.

3
toegevoegd
Er moet op worden gewezen dat de persoon die de vraag stelde gewoon een oplossing vond met veel minder steun dan mijn oplossing ... en ik ben het niet eens met uw verklaring over ondersteuning voor positie: fixed: caniuse.com/css-fixed
toegevoegd de auteur curly_brackets, de bron
Waar moet ik het niet mee eens zijn? "Gedeeltelijke ondersteuning in iOS Safari verwijst naar buggy-gedrag." Is het gedrag van de bugs in ~ 50% van de mobiele browsers voor u acceptabel?
toegevoegd de auteur Thomas McCabe, de bron
Opgemerkt moet worden dat vaste positionering in veel mobiele browsers niet goed wordt ondersteund. Meer hier: bradfrostweb.com/blog/mobile/fixed-position
toegevoegd de auteur Jonathan Stark, de bron

Ik heb onlangs vele uren besteed aan het bedenken van een praktische oplossing voor hetzelfde probleem. Er is geen goede manier om dit te doen, hoewel er een paar behoorlijke hacks zijn (de meeste van hen worden al genoemd). Het probleem is dat JavaScript is gepauzeerd terwijl de gebruiker aan het scrollen is. Het is logisch als je de implicaties in overweging neemt, maar het maakt het verdomd moeilijk om een ​​vast gepositioneerd element te implementeren.

Het beste dat ik heb kunnen vinden, is dit prachtige bericht van de mensen bij Google. Je kunt http://gmail.com bekijken op mobiele safari om het in actie te zien.

https://developers.google.com/mobile/articles/webapp_fixed_ui

Ik hoop dat dit helpt.

3
toegevoegd
Die link verwijst naar de startpagina van de ontwikkelaar. Het beste dat ik kon vinden was via archive.org: web.archive.org/web/20141001100814/https://…
toegevoegd de auteur duncan, de bron

Ik had een soortgelijk probleem en gebonden handlers aan touchstart/touchmove/touchend met jQuery om het scrollen met één vinger te detecteren en het werkte perfect. In mijn geval moest ik een ander element evenveel verplaatsen als de poging tot verplaatsen van een ander element en het werd netjes bijgewerkt toen de schuif werd geprobeerd, dus het zou geschikt moeten zijn voor uw behoefte.

2
toegevoegd

Als je alleen maar een plakkerig menu wilt, kun je jezelf wat hoofdpijn besparen door een bestaande bibliotheek te gebruiken. Ik heb succes gehad met iScroll:

http://cubiq.org/iscroll

U kunt op zijn minst een kijkje nemen naar hoe dit werkt en uw oplossing daarop baseren.

Veel plezier met hacken!

0
toegevoegd