Hvordan bygge klebrig rulle sidebar atferd som ligner på Facebook fôr sidebar

stemmer
0

Jeg jobber med å bygge klebrig sidebar atferd som vil kjøre sammen med en vertikal fôr som er svært lik en facebook-feed på skrive nettet. position: stickyfungerer godt for enkel bruk tilfelle hvor sidepanelet er kortere enn høyden på visningsfeltet. Men hvis sidefeltet er større enn synsfeltet sidepanelet behov for å ha noen å rulle mekanisme slik at du kan se nederst i sidepanelet når du ruller nedover feed.

Jeg prøver å gjenskape facebook sidebar klebrig bla her.

Den beste måten å forstå ønsket atferd er å teste ut dine facebook-feed og krympe skjermen høyde slik at synsfeltet er mindre enn sidefeltet høyde. Jeg skal prøve å oppsummere her:

Når view er høyere enn sidefeltet (enkel sak)

  1. Sidepanelet oppfører seg nøyaktig slik du forventer med posisjoner: klebrig. Sidepanelet forblir på samme sted og følger når du ruller ned og opp.

Når view er mindre enn din sidebar

  1. Når du ruller nedover i utgangspunktet sidebar ruller med fôret (de vises fast sammen)
  2. Når du kommer til bunnen av sidefeltet, så låser den på bunnen og når du ruller ned mer, vises sidelinjen nå trege med bunnen fast
  3. Når du nå bla tilbake, sidelinjen igjen vises festet til hoved feed, og ruller opp med hoved feed. Når du treffer toppen av sidepanelet er det så trege med topp fast.
  4. Så mellom disse to tilstander (topp løst da rulle opp og nedre løst da rulle ned), sidefelt ruller i samklang med hovedstrømmen.

Det er en veldig fin rulling erfaring, men svært vanskelig å gjenskape.

Jeg har oppnådd tilstandene nevnt i trinn 1-3 ovenfor, ved å anvende stilling klebrig med en topstilling, og når man rulle ned, ved hjelp av rulle hendelser og noen Viewport / sidefelt beregninger for å bestemme høydeforskjellen og regulere topcss-verdien slik at det låses når bunnen er foret opp med skjermen (egentlig initialTop - (sidebarHeight - viewportHeight). jeg kan ikke finne ut trinn 4 og 5. det beste jeg kunne gjøre var overgangen mellom de to topverdiene avhengig av rulleretning, men det er en veldig dårlig UX.

Jeg har en sandkasse eksempel på et oppsett her: https://codesandbox.io/s/fragrant-microservice-89b7z?fontsize=14&hidenavigation=1&theme=dark

Det er en grunnleggende layout med 2 kolonner (venstre sidefelt og hovedmate). Og det er en reagerer komponent kalt StickyScrollsom brytes rundt søylen og har all logikk for å oppdatere topverdien. Dette kan være en helt feil start på en god løsning, men noen hjelp er verdsatt.

Publisert på 13/02/2020 klokken 23:51
kilden bruker
På andre språk...                            

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