Jak zbudować lepki przewijania paska bocznego zachowanie podobne do Facebooka zasilającej bocznym

głosy
0

Pracuję na budowie lepką zachowanie paska bocznego, który będzie działał obok pionowego kanału, który jest bardzo podobny do paszy facebook na pulpicie internecie. position: stickydziała dobrze dla łatwego przypadku użycia, gdzie pasek boczny jest krótsza niż wysokość rzutni. Jednak jeśli pasek boczny jest większy niż rzutni potrzeby Sidebar mieć jakiś mechanizm przewijania, dzięki czemu można zobaczyć na dole paska bocznego podczas przewijania w dół kanału.

Próbuję odtworzyć facebook sidebar lepki przewijania tutaj.

Najlepszym sposobem, aby zrozumieć pożądane zachowanie jest, aby przetestować swój kanał z Facebookiem i kurczyć swoją wysokość ekranu tak, że rzutnia jest mniejsza niż wysokość bocznego. Postaram się streścić tutaj:

Gdy rzutnia jest wyższy niż paska bocznego (prosty przypadek)

  1. Pasek boczny zachowuje się dokładnie tak, jak można się spodziewać z pozycji: lepki. Sidebar pozostanie w tym samym miejscu i następuje podczas przewijania w dół i do góry.

Gdy rzutnia jest mniejsza niż paska bocznego

  1. Podczas przewijania w dół początkowo zwoje bocznym z paszą (oni pojawiają się stałe razem)
  2. Gdy dojdziesz do dołu paska bocznego, to wtedy blokuje na dole i podczas przewijania w dół więcej, teraz pojawia się lepki pasek boczny z dolnej nieruchomej
  3. Kiedy teraz cofnij się, pasek boczny po raz kolejny pojawi dołączony do głównego kanału, a przewija się z głównego kanału. Po trafieniu na górze paska jest następnie lepki z góry ustalona.
  4. Więc między tymi dwoma stanami (u góry ustalona podczas przewijania w górę, dół ustalona podczas przewijania w dół), przewija Sidebar w zgodzie z głównego kanału.

Jest to bardzo miłe doświadczenie przewijanie ale bardzo trudno odtworzyć.

Mam osiągnąć stany wymienione w punktach 1-3 powyżej, stosując pozycji Przyklejony z toppozycji, a podczas przewijania w dół, przy użyciu zdarzenia przewijania i kilka rzutni / obliczenia wysokości paska bocznego w celu określenia różnicy wysokości i regulację topwartości css tak zablokuje kiedy dno jest wyłożone z ekranu (zasadniczo initialTop - (sidebarHeight - viewportHeight). nie mogę dowiedzieć się kroki 4 i 5. najlepszym mogłem zrobić, to przejście pomiędzy dwoma topwartościami w zależności od jego kierunku przewijania, ale jest to bardzo zły UX.

Mam przykład obszaru izolowanego układu tutaj: https://codesandbox.io/s/fragrant-microservice-89b7z?fontsize=14&hidenavigation=1&theme=dark

Jest to podstawowy układ z 2 kolumny (lewym panelu i główny paszowych). I nie ma reagować komponent o nazwie StickyScroll, która owija się wokół kolumny i ma wszystko logikę do aktualizacji topwartości. To może być całkowicie błędne początek rozwiązanie dobre, ale każda pomoc jest mile widziana.

Utwórz 13/02/2020 o 21:51
źródło użytkownik
W innych językach...                            

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