Hogyan építsünk ragadós scroll oldalsáv hasonló viselkedést Facebook takarmány oldalsáv

szavazat
0

Én dolgozom épület ragadós oldalsávon magatartás, amely mentén húzódik egy függőleges takarmány, amely nagyon hasonlít a facebook takarmány asztali interneten. position: stickyjól működik a könnyű használat esetén, ahol az oldalsáv rövidebb, mint a magassága a nézetablakban. Azonban, ha az oldalsávon nagyobb, mint az ablakon az oldalsáv, szüksége van némi görgetés mechanizmus, így láthatja a az oldalsáv alján lefelé görgetve a feed.

Próbálom újra a facebook oldalsáv ragadós scroll itt.

A legjobb módja annak, hogy megértsük a kívánt viselkedés kipróbálni Facebook hírcsatorna és összezsugorodik a képernyő magasságát úgy, hogy a nézetablak kisebb az oldalsávon magasságát. Megpróbálom összefoglalni itt:

Ha a nézetablak magasabb az oldalsávon (egyszerű eset)

  1. Az oldalsáv pontosan úgy viselkedik, ahogy az elvárható a helyzet: ragadós. Az oldalsáv tartózkodás ugyanazon a helyen, és a következőképpen jelenik meg görgetés lefelé vagy felfelé.

Ha a nézetablak kisebb az oldalsávon

  1. Amikor lefelé görgetve kezdetben az oldalsáv görgeti a takarmány (nem láthatóak fix együtt)
  2. Amikor eljut az alján a sidebar, akkor majd zárolja az alján, és lefelé görgetve több, az oldalsáv most úgy tűnik, ragacsos alul rögzített
  3. Ha most lapozzunk vissza, az oldalsáv ismét megjelenik csatlakoztatva a főbb takarmány, és görgeti fel a főbb takarmány. Ha egyszer megüt a oldalsáv tetején ez majd ragacsos tetejére rögzített.
  4. Tehát a két állam között (felső fix görgetés esetén fel, alul fix, amikor lefelé görgetés), az oldalsáv tekercseket kórusban a főbb takarmány.

Ez egy nagyon szép görgetési élményt, de nagyon nehéz újra.

: Én már a felsorolt államok 1-3 lépéseket a fenti alkalmazásával helyzetben ragacsos egy tophelyzetben, és ha le is görget, a scroll események és néhány nézetet / oldalsáv magasságának számítások meghatározása szintkülönbség és beállítjuk a topcss értéket, így nem rögzül, amikor az alsó sorakoznak a képernyő (lényegében initialTop - (sidebarHeight - viewportHeight). nem tudok rájönni lépések 4. és 5. a legjobb, amit tehettem, az volt kettő közötti átmenet topértékek függően scroll irányba, de ez egy nagyon rossz UX.

Van egy sandbox példa egy elrendezés van: https://codesandbox.io/s/fragrant-microservice-89b7z?fontsize=14&hidenavigation=1&theme=dark

Van egy alap elrendezés 2 oszlop (bal oldali sávot, és a fő takarmány). És van egy reagálnak komponens, az StickyScroll, ami körbeveszi az oszlopot, és az összes logikai frissíteni a topértéket. Ez lehet egy teljesen rossz kezdés egy jó megoldás, de minden segítséget szívesen fogadunk.

A kérdést 13/02/2020 23:51
a forrás felhasználó
Más nyelveken...                            

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