Hoe te kleverige scroll sidebar gedrag vergelijkbaar met Facebook-feed sidebar te bouwen

stemmen
0

Ik ben bezig met het bouwen van kleverige sidebar gedrag dat naast een verticale voer dat is zeer vergelijkbaar met een Facebook-feed op het bureaublad web zal draaien. position: stickywerkt goed voor de gemakkelijke use case waar de zijbalk korter is dan de hoogte van de viewport. Maar als je zijbalk groter is dan de viewport de zijbalk moet een aantal scrolling mechanisme, zodat u de onderkant van de zijbalk kunt zien als je naar beneden scrollt de feed.

Ik probeer opnieuw de facebook zijbalk sticky scroll hier.

De beste manier om het gewenste gedrag te begrijpen is aan het testen van uw Facebook-feed en krimpen uw scherm hoogte, zodat uw viewport kleiner is dan de zijbalk hoogte. Ik zal proberen om hier samen te vatten:

Wanneer uw viewport is groter dan de zijbalk (eenvoudige geval)

  1. De zijbalk gedraagt ​​zich precies zoals je zou verwachten met het standpunt: plakkerig. De zijbalk blijft op dezelfde plaats en volgt als je schuift omlaag en omhoog.

Wanneer uw viewport kleiner is dan uw zijbalk

  1. Als je naar beneden scrollt in eerste instantie de zijbalk rollen met de voeding (ze lijken elkaar vast)
  2. Wanneer je naar de onderkant van uw zijbalk, het dan vergrendeld aan de onderkant en als je naar beneden scrollt meer, verschijnt de zijbalk nu kleverige met de vaste bodem
  3. Wanneer u nu scrollen een back-up, wederom de zijbalk naar uw hoofd-feed lijkt bevestigd, en de rollen omhoog met de belangrijkste feed. Zodra u de top van de zijbalk hit is het dan plakkerig met de top vast.
  4. Zo tussen die twee staten (top vast bij het scrollen up, bodem vast bij het scrollen naar beneden), de zijbalk rollen in harmonie met de belangrijkste feed.

Het is een zeer leuke scrollen ervaring, maar zeer moeilijk te reproduceren.

Ik heb het in de stappen 1-3 hierboven opgesomde toestanden bereikt door het toepassen van positie sticky met een toppositie, en als je naar beneden scrollt, met behulp van scroll evenementen en enkele viewport / Zijbalkhoogte berekeningen om het hoogteverschil te bepalen en het aanpassen van de topcss waarde, zodat deze vergrendeld wanneer de bodem is opgesteld met het scherm (in wezen initialTop - (sidebarHeight - viewportHeight). ik kan niet achterhalen stappen 4 en 5. het beste wat ik kon doen was de overgang tussen de twee topwaarden, afhankelijk van uw scroll richting, maar het is een zeer slechte UX.

Ik heb een zandbak voorbeeld van een lay-out hier: https://codesandbox.io/s/fragrant-microservice-89b7z?fontsize=14&hidenavigation=1&theme=dark

Er is een basis lay-out met 2 kolommen (links sidebar en de belangrijkste voeding). En er is een reactie component heet StickyScrolldie wraps rond de kolom en heeft alle logica om de update topwaarde. Dit kan een volledig verkeerde start voor een goede oplossing, maar alle hulp wordt zeer gewaardeerd.

De vraag is gesteld op 13/02/2020 om 21:51
bron van user
In andere talen...                            

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