Scrollen in notificaties

[_Thanatos_]

Als je in de header op het zonnetje klikt (sorry, voor mij ziet het eruit als een zonnetje), naast het bloempje (nogmaal sorry, voor mij ziet het eruit als een bloempje), dan krijg je een lijstje met je notificaties. Fair enough.

Het scrollen in die lijst gaat heel... vreemd. Ik weet zeker dat smooth scrolling uit staat, maar toch scrollt ie smooth. Er lijkt ook iets van delay in te zitten, het voelt daardoor heel traag.

Ik zou twee dingen willen weten:
1) Hoe krijg je het voor elkaar om een browserinstelling te veranderen binnen 1 lijstje?
2) Alle gekheid op een stokje: kan hier please de normale scroll-functionaliteit in gezet worden die iedere browser gewoon al heeft? Gewoon met overflow:auto.

[crisp]

Hoe krijg je het voor elkaar om een browserinstelling te veranderen binnen 1 lijstje?

Dat doen we niet; dit is onze eigen custom scroll implementatie

Alle gekheid op een stokje: kan hier please de normale scroll-functionaliteit in gezet worden die iedere browser gewoon al heeft? Gewoon met overflow:auto.

Die is iig onder windows behoorlijk fugly

[_Thanatos_]

crisp schreef op dinsdag 17 september 2013 @ 16:33:
[...]

Dat doen we niet; dit is onze eigen custom scroll implementatie

Dat is dus niet handig, en het werkt niet fijn.

[...]

Die is iig onder windows behoorlijk fugly

Dus? Je gaat toch ook geen custom pinch-to-zoom implementeren in de lightboxen met foto's? Dit zijn dingen die de browser zelf kan. De malle OSX-gebruikers zijn zelfs verkeerdom-scrollen gewend (dus wieltje omhoog = omlaag scrollen).

Voor WebKit -en Blink-based browsers is de scrollbar trouwens behoorlijk goed te custom-stylen.

[ Voor 8% gewijzigd door _Thanatos_ op 23-09-2013 13:02 ]

[crisp]

_Thanatos_ schreef op maandag 23 september 2013 @ 13:01:
[...]

Dus? Je gaat toch ook geen custom pinch-to-zoom implementeren in de lightboxen met foto's? Dit zijn dingen die de browser zelf kan. De malle OSX-gebruikers zijn zelfs verkeerdom-scrollen gewend (dus wieltje omhoog = omlaag scrollen).

Als pinch-to-zoom gewoon kut werkt in bepaalde browsers zouden we dat wel overwegen

Voor WebKit -en Blink-based browsers is de scrollbar trouwens behoorlijk goed te custom-stylen.

Ja, maar er is meer dan alleen WebKit

In bepaalde situaties zien we gewoon liever een scroll-implementatie die minder kut is dan in sommige browsers, en die cross-browser consistent(er) is. Dat is namelijk het probleem met dergelijke UI in sommige browsers: het is niet consistent met andere browsers, werkt kut (bijvoorbeeld standaard helemaal geen scroll-indicatie), is lelijk en neemt belachelijk veel extra ruimte in (windows).

[_Thanatos_]

Heel mooi allemaal, maar nu werkt het echt kut. Ik ben instant scroll (i.t.t. smooth scrolling gewend), en daardoor voelt het traag. De scroll-animatie loopt immers altijd achter op mijn scrollwiel.

Alleen maar omdat de scrollbalken niet naar je zin zijn, een complete custom implementatie gaan maken, vind ik slecht een slechte ontwerpkeuze. Je kunt er ook voor kiezen, op de een of andere manier, om standaard scrollen intact te houden, de gewone scrollbar te hiden, en dan met javascript een leuk scrollbarretje te tekenen bij onscroll.

[ Voor 46% gewijzigd door _Thanatos_ op 23-09-2013 23:59 ]

[crisp]

Dat laatste hebben we geprobeert maar dat werkte weer niet in bepaalde browsers. Overigens werkt de scrolling bij mij wel instant (Firefox).

[Hero of Time]

crisp schreef op dinsdag 24 september 2013 @ 08:19:
Dat laatste hebben we geprobeert maar dat werkte weer niet in bepaalde browsers. Overigens werkt de scrolling bij mij wel instant (Firefox).

Zowel de notificaties als de Tracker scrollen bij mij alsof ik vloeiend scrollen aan heb. Dat heb ik niet en geeft daarom een traag gevoel. Dat is wat _Thanatos_ ook bedoelt. Vloeiend scrollen is leuk, maar 't beeld is nog steeds aan het bewegen als je muiswiel al stil staat. Ik heb hierdoor meerdere malen meegemaakt dat ik mij rot scroll om op een deel van een pagina te komen, om dan ergens halverwege te eindigen omdat ik denk er te zijn maar de 'smooth' te ver achter blijft met het verwerken van m'n scroll actie.

[_Thanatos_]

^ precies dat ja.

Maar de algemene consensus in de frontend-wereld waar ik iig in leef, is dat het "kapen" van standaard browserdingen sowieso geen goed idee is. Er zijn uitzonderingen, maar een scrollend lijstje is dat niet. Een standaard scroll-functie moet je niet overnemen door naar het muiswieltje te kijken, om meerdere redenen:

1) Het luistert geheel automagisch en gratis naar de browser/OS-instellingen. Mensen die in OSX het verkeerdom scrollen niet uitgezet hebben, ervaren de scrollrichting als hetzelfde als overal. Smooth scrolling, en scrollsnelheid: idem dito.
2) Het werkt dan ook met de middelste muisknop. Die hoort een cursor met 4 pijlen te geven, en dan kun je je muis bewegen om die kant op te scrollen. De meeste browsers hebben dit, zonder dat er muisdrivers nodig zijn.
3) Mensen die gewend zijn om op alternatieve manieren te scrollen dmv een truuk in de muisdrivers, kunnen dat niet gebruiken. Bijv scrollen met muisknopjes, of een bepaalde gesture.
4) Touchscreen kan een probleem zijn. Omdat het geen standaard scroll is, zal touch&drag de hele pagina scrollen ipv alleen dat element. Touchscreen zijn tegenwoordig redelijk normaal op desktop-achtige computers.
5) Scrollen zal niet werken als er wordt gescrolld met een soort "scoll anywhere" plugin die gebruikt kan worden voor faux touchscreens of digitizer tablets.

Er is voor zover ik kan opmaken maar één nadeel: de style. In mijn optiek staat het oplossen van de styling in geen verhouding tot bovenstaande nadelen.

[ Voor 97% gewijzigd door _Thanatos_ op 25-09-2013 13:02 ]

[crisp]

Ik leef in dezelfde wereld hoor

Anyway: de afweging mbt styling weegt voor ons wel zwaar; zeker in de tracker is de windows scrollbar simpelweg een gedrocht, afgezien van het feit dat deze ook extra ruimte inneemt itt bijvoorbeeld de native scrollbar op een Mac.

Daarnaast is er op sommige touchdevices standaard helemaal geen scrollindicatie als een element niet 'actief' is; dat is natuurlijk een GUI-misser eerste klas van de browser/OS vendors, en daarbij ook in sommige gevallen een usability issue.

True, de native scrollbehaviour precies nabouwen voor alle mogelijke inputdevices gaat je simpelweg niet lukken; browservendors hebben het sowieso al erg lastig gemaakt mbt alle mogelijke events en cross-browser consistent gedrag daarvan.

Het wachten is totdat alle browser het mogelijk maken de scrollbar (iig voor scrollende subelementen) consistent te kunnen stylen (en aan te kunnen geven dat je altijd een scrollindicatie wilt als de inhoud scrollable is), maar gezien het feit dat ze dat in de afgelopen 10 jaar nog niet gelukt is (IE heeft ooit een poging gedaan, maar daar werd de scrollbar niet minder fugly van ) schept weinig hoop voor de toekomst.

[_Thanatos_]

Je kunt altijd nog de scrollbar hiden door het element voldoende breder te maken dan z'n parent, en dan overflow:hidden op die parent en overflow:auto op het scrollende lijstje. Dan scrollt ie native, zonder zichtbare scrollbalk. Vervolgens kun je met javascript wel iets tekenen wat op een scrollbar lijkt.

Je kunt dan ook met javascript een scrollindicatie tekenen, bijv een schaduw onderaan als er naar onder gescrolld kan worden, of andersom voor bovenaan. Google heeft zoiets ook hier en daar, en Google heeft dat usability-wise vast wel onderzocht.

Is dat mss een handige oplossing? Niet getest verder, maar het zou zomaar kunnen werken. Tweakers.net is ook vast niet eerste die opvalt dat de standaard scrollbar "lelijk" is...

[crisp]

_Thanatos_ schreef op woensdag 25 september 2013 @ 17:36:
Je kunt altijd nog de scrollbar hiden door het element voldoende breder te maken dan z'n parent, en dan overflow:hidden op die parent en overflow:auto op het scrollende lijstje. Dan scrollt ie native, zonder zichtbare scrollbalk. Vervolgens kun je met javascript wel iets tekenen wat op een scrollbar lijkt.

Dat hadden we eerst ook; grootste probleem daarbij is dat je moet gaan bepalen of de scrollbar ruimte inneemt (bv windows) of niet (bv mac/touch devices), en dat is al niet erg eenvoudig (en bovendien een redelijk zware 'feature'-test), maar er waren nog wel meer issues met die benadering (geen onscroll event bv op touch devices, of werd pas *na* het scrollen afgevuurd, of scrollTop werd niet bijgewerkt tijdens het scrollen etcetera). Kortom: dat was een crossbrowser ramp...

[ Voor 12% gewijzigd door crisp op 25-09-2013 17:44 ]

[_Thanatos_]

Dan maak je het element 200% breedte van de container, en dan de lijstitems 50% daar weer van. Dan weet je zeker dat de scrollbalk niet zichtbaar is.

En issues met touch zijn er natuurlijk altijd
maarja, van de andere kant, de site is zo goed als totaal niet adaptive...

[ Voor 32% gewijzigd door _Thanatos_ op 26-09-2013 01:11 ]

[crisp]

_Thanatos_ schreef op donderdag 26 september 2013 @ 01:10:
[...]
maarja, van de andere kant, de site is zo goed als totaal niet adaptive...

Ik wil je wel toegang geven tot de Responsive beta hoor

[NMe]

_Thanatos_ schreef op donderdag 26 september 2013 @ 01:10:
Dan maak je het element 200% breedte van de container, en dan de lijstitems 50% daar weer van. Dan weet je zeker dat de scrollbalk niet zichtbaar is.

Weet je wat het leuke is aan hacks? Precies dat: het zijn hacks. Er is altijd wel een browser die daar gekke dingen door gaat doen. Deze oplossing werkt cross-browser, is een stuk minimaler dan een normale scrollbalk (pluspunten, IMO) en hij ziet er ook nog eens niet lelijk uit. Hij werkt exact hetzelfde als de scrollbar in je browser met als enige verschil dat hij smooth scrolling heeft. Je doet alsof het een grote ramp is, maar waar hébben we het nou helemaal over?

Hero of Time schreef op dinsdag 24 september 2013 @ 09:37:
[...]

Zowel de notificaties als de Tracker scrollen bij mij alsof ik vloeiend scrollen aan heb. Dat heb ik niet en geeft daarom een traag gevoel. Dat is wat _Thanatos_ ook bedoelt. Vloeiend scrollen is leuk, maar 't beeld is nog steeds aan het bewegen als je muiswiel al stil staat. Ik heb hierdoor meerdere malen meegemaakt dat ik mij rot scroll om op een deel van een pagina te komen, om dan ergens halverwege te eindigen omdat ik denk er te zijn maar de 'smooth' te ver achter blijft met het verwerken van m'n scroll actie.

Over welk "deel van de pagina" heb je het? Die scrollbalk zit voor zover ik kan zien alleen in de notificatiebalk en DM's?

[ Voor 35% gewijzigd door NMe op 26-09-2013 01:16 ]

[Hero of Time]

NMe schreef op donderdag 26 september 2013 @ 01:15:

[...]

Over welk "deel van de pagina" heb je het? Die scrollbalk zit voor zover ik kan zien alleen in de notificatiebalk en DM's?

Algemeen deel van een pagina. Stel je wilt naar 2/3 van de pagina scollen met je muiswiel. Ipv dit op een bejaarde tempo te doen, scoll je snel en stopt wanneer je dent er te zijn. Zonder smooth scrolling ben je redelijk in de buurt, waar je moet zijn of iets er voorbij.
Heb je smooth aan staan, blijk je op 1/3 tot de helft van de pagina te stoppen. Het kan zelfs zo erg zijn dat je OS begint te piepen omdat het de hoeveelheid events niet aan kan omdat het te veel cpu tijd aan het gebruiken is om de scoll smooth te maken, ipv de interrupts af te handelen.

[MsG]

NMe schreef op donderdag 26 september 2013 @ 01:15:
[...]

Hij werkt exact hetzelfde als de scrollbar in je browser met als enige verschil dat hij smooth scrolling heeft. Je doet alsof het een grote ramp is, maar waar hébben we het nou helemaal over?

Laat het hele scrollen nou net de hoofdfunctionaliteit zijn, dát werkt dus niet. Het is een beetje alsof je een auto beschrijft waarbij het rijden niet lekker werkt, maar dat hij er wel leuk uitziet. Overigens heeft de Facebook-vriendenlijst ook een eigen implementatie die mijn instant-scrolling wèl honoreert, het kán dus wel.

[crisp]

Hero of Time schreef op donderdag 26 september 2013 @ 12:03:
[...]

Algemeen deel van een pagina. Stel je wilt naar 2/3 van de pagina scollen met je muiswiel. Ipv dit op een bejaarde tempo te doen, scoll je snel en stopt wanneer je dent er te zijn. Zonder smooth scrolling ben je redelijk in de buurt, waar je moet zijn of iets er voorbij.
Heb je smooth aan staan, blijk je op 1/3 tot de helft van de pagina te stoppen. Het kan zelfs zo erg zijn dat je OS begint te piepen omdat het de hoeveelheid events niet aan kan omdat het te veel cpu tijd aan het gebruiken is om de scoll smooth te maken, ipv de interrupts af te handelen.

Het punt is dat we de custom scrollbar slechts op een paar plekken gebruiken en niet voor de gehele pagina

MsG schreef op donderdag 26 september 2013 @ 12:21:
[...]


Laat het hele scrollen nou net de hoofdfunctionaliteit zijn, dát werkt dus niet. Het is een beetje alsof je een auto beschrijft waarbij het rijden niet lekker werkt, maar dat hij er wel leuk uitziet. Overigens heeft de Facebook-vriendenlijst ook een eigen implementatie die mijn instant-scrolling wèl honoreert, het kán dus wel.

Of ze hebben simpelweg geen 'smoothing' ingebouwd in hun eigen scrollimplementatie Wij kunnen het ook uitzetten, maar volgens mij is smooth-scrolling toch het meest standaard (en vziw is in scripting niet te bepalen wat de instelling van de gebruiker is).

[MsG]

Ik ken weinig systemen los van tablets en touch-devices waarbij smooth standaard is. In Windows niet, in browsers niet.

[_Thanatos_]

NMe schreef op donderdag 26 september 2013 @ 01:15:
[...]Hij werkt exact hetzelfde als de scrollbar in je browser met als enige verschil dat hij smooth scrolling heeft. Je doet alsof het een grote ramp is, maar waar hébben we het nou helemaal over?

Nou zeg
Ik zit m'n stinkende best te doen om vijf grote nadelen (zie boven) op te sommen, en jij ziet er serieus maar één? En nog niet eens in z'n geheel? Jammer. Lees die post nog eens, alsjeblieft. Ik lul echt niet uit m'n nek.

Laat ik er nog een bij halen: scrollen met toetsenbord werkt ook niet.

[NMe]

_Thanatos_ schreef op donderdag 26 september 2013 @ 12:53:
[...]

Nou zeg
Ik zit m'n stinkende best te doen om vijf grote nadelen (zie boven) op te sommen, en jij ziet er serieus maar één? En nog niet eens in z'n geheel? Jammer. Lees die post nog eens, alsjeblieft. Ik lul echt niet uit m'n nek.

Laat ik er nog een bij halen: scrollen met toetsenbord werkt ook niet.

Je eerste drie punten houden amper water omdat die features amper gebruikt worden en zeker niet voor dat soort kleine vakjes en je vierde en vijfde punt zijn volgens mij zelfs onwaar. Die scroll werkt óók prima op touch. Het enige argument dat wél steekhoudt is de smooth scroll en zelfs dat nadeel vind ik absoluut minimaal voor een notificatiebalkje waarin je 99% van de tijd alleen de bovenste notificaties nodig hebt en dus niet eens hoeft te scrollen.

Dus je lult niet uit je nek maar ik vind wel dat je alles véél erger maakt dan het is.

[MsG]

Maar als andere websites vergelijkbare mooie scrollbars gebruiken die alle usability die verlangt wordt wèl heeft, is het toch op zijn minst een idee daar op termijn eens naar te kijken? Uiteindelijk wil je toch dat het werkt voor de eindgebruiker?

[NMe]

Tsja, dat die middelste muisknop niet werkt is logisch, want alle berichten in het scrollgebied zijn klikbaar om naar het daadwerkelijk gerelateerde bericht te gaan. Dat uitschakelen beperkt dus juist de primaire werking van die notificaties. Het toetsenbord is vast te fixen, maar of dat nou zo'n grote verbetering is voor een menu dat je alleen met je muis (of touch) open kan klikken...? Die smooth scroll uitzetten zal vast ook geen groot issue zijn, al had ik persoonlijk niet eens gemerkt dat 'ie erop zat. En nee: in mijn browser staat smooth scrolling ook uit.

[ Voor 7% gewijzigd door NMe op 26-09-2013 13:50 ]

[Hero of Time]

MsG schreef op donderdag 26 september 2013 @ 12:50:
Ik ken weinig systemen los van tablets en touch-devices waarbij smooth standaard is. In Windows niet, in browsers niet.

IE, FF en Opera hebben standaard Smooth Scrolling aan staan. Ik zet ze daarom als ik een systeem heb waar 't vers op staat gelijk uit. Ook Office heeft smooth scrolling mogelijk en staat in 2013 standaard aan (onder 't mom van animaties oid).

[crisp]

MsG schreef op donderdag 26 september 2013 @ 13:33:
Maar als andere websites vergelijkbare mooie scrollbars gebruiken die alle usability die verlangt wordt wèl heeft, is het toch op zijn minst een idee daar op termijn eens naar te kijken? Uiteindelijk wil je toch dat het werkt voor de eindgebruiker?

Ik heb heel wat custom scrollimplementaties bekeken, maar ik denk dat die van onszelf nog wel het meest versatile en compleet is. Maar als je linkjes hebt naar andere libraries dan wil ik daar graag naar kijken

[NMe]

Hero of Time schreef op donderdag 26 september 2013 @ 14:46:
[...]

IE, FF en Opera hebben standaard Smooth Scrolling aan staan. Ik zet ze daarom als ik een systeem heb waar 't vers op staat gelijk uit. Ook Office heeft smooth scrolling mogelijk en staat in 2013 standaard aan (onder 't mom van animaties oid).

Maar hoe krijg je dit dan klaar als je smooth scrolling uit hebt staan?

Hero of Time schreef op dinsdag 24 september 2013 @ 09:37:
[...]

Ik heb hierdoor meerdere malen meegemaakt dat ik mij rot scroll om op een deel van een pagina te komen, om dan ergens halverwege te eindigen omdat ik denk er te zijn maar de 'smooth' te ver achter blijft met het verwerken van m'n scroll actie.

Alle pagina's op Tweakers gebruiken zelf gewoon de scrollfunctie van je browser en vrijwel alleen de notificaties en berichtenbalk gebruiken die smallere scroller.

[Hero of Time]

NMe schreef op donderdag 26 september 2013 @ 14:51:
[...]

Maar hoe krijg je dit dan klaar als je smooth scrolling uit hebt staan?

Que?

[...]

Alle pagina's op Tweakers gebruiken zelf gewoon de scrollfunctie van je browser en vrijwel alleen de notificaties en berichtenbalk gebruiken die smallere scroller.

Ik heb 't over mijn ervaring met smooth scroll en waarom ik 'm dus uitschakel.