Cum de a construi parcurgere lipicios un comportament similar cu bara laterală de alimentare bara laterală Facebook

voturi
0

Sunt de lucru pe construirea de comportament lipicios bara laterală , care va rula alături de un flux vertical , care este foarte similar cu un flux Facebook de pe desktop -ul web. position: stickyfuncționează bine pentru cazul de utilizare ușoară în cazul în care bara laterală este mai scurtă decât înălțimea imaginii curente. Cu toate acestea , dacă bara laterală este mai mare decât portul de vizualizare nevoile din bara laterală pentru a avea un mecanism de defilare , astfel încât să puteți vedea în partea de jos a barei laterale pe măsură ce derulați în jos feed.

Am încercat să recreeze facebook Sidebar lipicios scroll aici.

Cel mai bun mod de a înțelege comportamentul dorit este de a testa feed-ul Facebook și micșora înălțimea ecranului, astfel încât dimensiunea grafică este mai mică decât înălțimea barei laterale. Voi încerca să rezum aici:

Când dimensiunea grafică este mai înalt decât bara laterală (caz simplu)

  1. Bara laterală se comportă exact așa cum te-ai aștepta cu poziția: lipicios. Stâlpii de bara laterală același loc și urmează pe măsură ce derulați în jos și în sus.

Când dimensiunea grafică este mai mică decât bara laterală

  1. Când defilați în jos, inițial, sulurile bara laterală cu hrana (ele apar fixe împreună)
  2. Când ajungi la partea de jos a barei laterale, apoi se blochează în partea de jos și pe măsură ce derulați în jos mai mult, bara laterală acum apare lipicios cu partea de jos fixă
  3. Când acum derula în sus, bara laterală, din nou, apare atașat la feed-ul principal, și defilează cu furajul principal. Odată ce te-a lovit în partea de sus a barei laterale este apoi lipicios cu partea de sus fixă.
  4. Deci, între cele două state (de sus fix atunci când defilare în sus, de jos fix atunci când derulând în jos), sulurile bara laterală la unison cu furajul principal.

Este o experiență foarte frumos defilare, dar foarte greu să recreeze.

Am realizat stările enumerate în pașii 1-3 de mai sus , prin aplicarea poziție lipicios cu o toppoziție, și când defilați în jos, folosind evenimente de defilare și unele viewport / calcule de înălțime bara laterală pentru a determina diferența de înălțime și ajustarea topvalorii css , astfel se blochează atunci când partea de jos este aliniat cu ecranul ( în esență initialTop - (sidebarHeight - viewportHeight). nu pot să dau seama pașii 4 și 5. Cel mai bun am putut face a fost de tranziție între cele două topvalori în funcție de direcția de derulare , dar este o UX foarte proastă.

Am un exemplu cutie cu nisip de un aspect aici: https://codesandbox.io/s/fragrant-microservice-89b7z?fontsize=14&hidenavigation=1&theme=dark

Există un aspect de bază cu 2 coloane (bara laterală stânga și de alimentare principală). Și există o componentă numită reacționează , StickyScrollcare se înfășoară în jurul coloanei și are toate logica pentru a actualiza topvaloarea. Acest lucru poate fi un început complet greșit la o soluție bună, dar orice ajutor este foarte apreciat.

Întrebat 13/02/2020 la 21:51
sursa de către utilizator
În alte limbi...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more