Css snap points en web app capable

[We Are Borg]

Sinds ~2015 heeft webkit ondersteuning (met prefix) voor snap points. De spec is nog niet definitief, maar op basis van caniuse is de ondersteuning al erg goed, dus ik ben met snap points aan de slag gegaan.

Ik loop nu tegen een probleem aan. Voor het probleem heb ik een simpelere case op JSFiddle: http://jsfiddle.net/hpjtqewn/2/

Het is een simpel voorbeeld van snap points in de praktijk: als je klikt op de horziontale scroll bar zie je de 'snaps'. JSFiddle is een handig platform om het probleem aan te tonen.

Stappen:

1. Pin de JSFiddle op je Iphone/Ipad op je homescreen
2. Open vanuit daar de JSFiddle

Door het gebruik van:

HTML:

<meta name="apple-mobile-web-app-capable" content="yes" />

Wordt de JSFiddle o.a. zonder browser bar getoond. Echter, nu werken de snap points niet meer. Je scrolt nu vloeiend door de OL heen. Ik begrijp niet waarom en krijg het tot nu toe niet opgelost. Iemand een suggestie?

Wat ik al geprobeerd heb:

1. Browser support check:

JavaScript:

 if ("-webkit-scroll-snap-type" in document.body.style) {
    alert ('ja er is support');
  } 

(uiteraard) een alert

2. CSS aanpassingen, o.a.

Cascading Stylesheet:

-webkit-scroll-snap-points-x: repeat(200px); /* ipv percentage */

Geen succes...

3. Een extra wrapper met een height en width constraint. Geen succes

Probleem is dat ik ook niet goed weet waar te zoeken, want zonder de meta tag werkt het prima. Wat veranderd het gedrag van webkit door die meta waardoor de snap points niet werken ?

[Juup]

Fix iig even je html, jsfiddle laat in rood de errors zien.
(hint: </li> ipv </il>)

[b2vjfvj75gjx7]

Echt breed ondersteund zijn snappoints nog lang niet;

Nog geen 20% van de browsers ondersteunt het volledig - sterker; alleen de nieuwste Safari pakt hem, maar dat is iOS / OSX only...

Vooral handig zouden snappoint zijn op mobiel, en dan mis je dus volledig alle devices (behalve iOS).

Met een polyfill krijg je het trouwens wel aan de praat, maar persoonlijk vind ik het rete-irritant, zeker op desktop of tablet;

Scroll je met een loei naar rechts om vaart te maken, stuitert die snappoint-declaratie weer in beeld en scrollt terug de viewport in

Leuke techniek, maar zonder context (user intention) is het wel erg grof geschut.

Antwoord : wellicht werkt het niet, omdat het in een iFrame op JSfiddle draait?

In dit geval zou een kale setup beter zijn....

[We Are Borg]

Zelfs met een polyfill werkt het niet in mijn case.

Grof geschut eens maar voor mijn case best interessante techniek. Ik wil dat een user horizontaal door sections heen kan scrollen als een manier van navigatie

Maar je opmerkingen hebben wel geholpen. Ik dacht dat ik veel betere ondersteuning had gelezen dus ik kijk net opnieuw naar caniuse

Works in the iOS WKWebView, but not UIWebView.

Daar staat precies mijn punt, geen idee hoe ik daar overheen heb gelezen . Kortom, het zal dus een JavaScript oplossing moeten worden

[b2vjfvj75gjx7]

We Are Borg schreef op zondag 10 september 2017 @ 08:08:
Zelfs met een polyfill werkt het niet in mijn case.

Grof geschut eens maar voor mijn case best interessante techniek. Ik wil dat een user horizontaal door sections heen kan scrollen als een manier van navigatie

Maar je opmerkingen hebben wel geholpen. Ik dacht dat ik veel betere ondersteuning had gelezen dus ik kijk net opnieuw naar caniuse


[...]


Daar staat precies mijn punt, geen idee hoe ik daar overheen heb gelezen . Kortom, het zal dus een JavaScript oplossing moeten worden

https://codepen.io/team/css-tricks/pen/yXrrEb

Deze (met polyfill) werkt wel, ook op desktop Chrome.

Als je naar rechts scrollt (in het onderste vlak) dan 'snapped' de scrollbar zich vast aan de anchors.

Maar dat is juist irritant; als ik bv. naar item 3 wil scrollen en te vroeg los laat, dan zie je die scrollbar weer terugstuiteren naar item 2 - en als gebruiker heb je geen idee waarom

- edit - jQuery oplossing : https://projects.lukehaas.me/scrollify

Je kan gewoon scrollen, maar als je een vlak binnenkomt en die zit net niet aan de bovenkant vastgeplakt, dan corrigeert de scroll-positie zich en 'snapped' hij naar het dichts bijzijnde object.

Rete-irritant maar kan handig zijn om items geforceerd in beeld te krijgen, natuurlijk.

[ Voor 15% gewijzigd door b2vjfvj75gjx7 op 10-09-2017 16:01 ]