Horizontal scroll snap + smooth scroll

[Asitis]

Hey lieden,

Wij zitten hier al een paar maanden met één issue voor een website: we willen 'm horizontaal laten scrollen, en laten snappen naar elk 'scherm'. De schermen worden a.d.h.v. javascript 100% hoog en breed, afhankelijk van het scherm. Zie deze situatie:



Dit werkt allemaal al, je kunt van links naar rechts scrollen - allemaal geen probleem.
Het probleem is dat we 'm willen laten 'snappen' zodra je een stukje scrollt, dat ie automatisch het volgende venster netjes in het midden/full-screen toont.

We hebben het hele web al gehad, maar werkende oplossingen komen we niet tegen.
Dit is een soortgelijke vraag;
http://stackoverflow.com/...cal-scrolling-snap-jquery

http://jsfiddle.net/RPkLW/30/ dit doet wel wat we willen, maar dan verticaal en erg buggy. Die kregen we ook niet horizontaal aan de praat.

Misschien een van de slimme koppen hier?

[creator1988]

Doet me denken aan het gedrag van een photo gallery? Coding Glamour: iOS like Javascript photo gallery breakdown

[Asitis]

Precies ja. Dergelijke voorbeelden heb ik wel een paar gevonden, maar die zijn allemaal click'n'drag (inderdaad dus swipe-functionaliteit). Het idee is dat ie met het scrollwiel werkt.

[TheNephilim]

Misschien lukt het hiermee: http://demos.flesler.com/jquery/scrollTo/

Iets van; "aantal pixels gescrolled groter dan N dan scrollTo..."

[Bosmonster]

Het is het een of het ander, dit gaat nooit samen werken. Je kunt niet dat ding gaan scrollen als je zelf al aan het scrollen bent (dan wordt het een puinhoop).

Wat je wel kunt doen om dit conflict te voorkomen:
1. Wachten tot NA het scrollen (bijvoorbeeld als er 500 ms niet gescrolld is) en dan snappen naar de dichtsbijzijnde pagina.
2. Scrollen in z'n geheel uitzetten en kijken of je dan nog wel het scroll-event kunt afvangen op een of andere manier. Dan kun je bij een scroll-intentie naar de volgende/vorige pagina gaan.

Asitis schreef op donderdag 07 februari 2013 @ 17:24:
Precies ja. Dergelijke voorbeelden heb ik wel een paar gevonden, maar die zijn allemaal click'n'drag (inderdaad dus swipe-functionaliteit). Het idee is dat ie met het scrollwiel werkt.

Ik weet niet hoe jij je muis vast hebt, maar mijn scrollwiel gaat van boven naar beneden. Je kunt je dus sowieso afvragen hoe natuurlijk dit gaat zijn.. en of mensen uberhaupt gaan snappen dat je naar beneden moet scrollen om naar rechts te gaan.

Vergeet ook niet even goed te testen met trackpads en muizen met een virtueel scrollwiel. Dat wordt vaak vergeten en dan werkt de hele site voor geen meter.

[ Voor 41% gewijzigd door Bosmonster op 08-02-2013 14:55 ]

[TheNephilim]

Bosmonster schreef op vrijdag 08 februari 2013 @ 14:50:
Het is het een of het ander, dit gaat nooit samen werken. Je kunt niet dat ding gaan scrollen als je zelf al aan het scrollen bent (dan wordt het een puinhoop).

Wat je wel kunt doen om dit conflict te voorkomen:
1. Wachten tot NA het scrollen (bijvoorbeeld als er 500 ms niet gescrolld is) en dan snappen naar de dichtsbijzijnde pagina.
2. Scrollen in z'n geheel uitzetten en kijken of je dan nog wel het scroll-event kunt afvangen op een of andere manier. Dan kun je bij een scroll-intentie naar de volgende/vorige pagina gaan.


[...]


Ik weet niet hoe jij je muis vast hebt, maar mijn scrollwiel gaat van boven naar beneden. Je kunt je dus sowieso afvragen hoe natuurlijk dit gaat zijn.. en of mensen uberhaupt gaan snappen dat je naar beneden moet scrollen om naar rechts te gaan.

Vergeet ook niet even goed te testen met trackpads en muizen met een virtueel scrollwiel. Dat wordt vaak vergeten en dan werkt de hele site voor geen meter.

Als je dan toch al horizontaal wil scrollen is het een optie om event.preventDefault(); te gebruiken.

Netter misschien: http://joelb.me/scrollpath/ ... al weet ik niet hoe het met de ondersteuning bij de verschillende browsers zit. Wellicht een optie!

[Asitis]

@Bosmonster; Dat het niet gebruikelijk is, is geen probleem. Ik heb zo'n magic-touch-muis, daarmee kun je sowieso ook horizontaal scrollen. Met simpel javascriptje kun je de richting van een old-skool muiswiel veranderen.

Goede opmerking over scroll-delay, daar had ik nog niet bij stilgestaan.. Maar het kán wel; http://dangelicoguitars.com/ (niet het beste voorbeeld, nogal een grafisch zware site), maar je ziet dat de pagina's "doorrollen" tot je compleet in beeld zijn.

Bedankt voor alle input, ik ga er eens mee puzzelen!

[Anoniem: 215492]

Je kunt altijd even bij awwwards.com checken.