Как реализовать параллельный скролл в блоке?

Question

[Полина Емельянова]

Коллеги, прошу вас помочь мне разобраться со скроллом меню, параллельно со скроллом окна.

САБЖ:
Есть лайаут у которого есть ДЛИННОЕ сайдебар меню, упакованное в блок, который позволяет его скроллить.
При скролле окна, после шапки, сайдебвр прилепает к его верху и начинает скроллится сам.

ПРОБЛЕМА:
Если мы захотим сами, руками, проскроллить сайдебар, а потом вернемся к скроллу окна - сайдебар "подпрыгнет" на координату скролла у окна, что естественно.

НАДО:
Запомнить куда был проскроллен сайдебар пользователем, и начинать скролл именно с этой позиции, если есть куда скроллить, т.е. высота сайдебара еще не вся.

В обратную сторону, т.е. при скролле окна наверх, тоже должно работать.

НЕ ПОЛУЧАЕТСЯ адекватно придумать логику этого действа. Прошу вас помочь.

Песочница:


Заранее БЛАГОДАРЮ!

Comments

[imko]

Ваще такое подозрение что адекватной логики тут и не может быть, либо мы юзеру диктуем позицию скролла менюшки либо он нам) В том же вк например сайдбар правый в ленте юзеру крутить нельзя

[imko]

А так ваще для твоего "надо" просто замени scrollTop на scrollBy()

Answer 1

[szQocks]

const sidebarScroller = document.querySelector(".sidebar__scroller");

const state = {
  pageYOffset: 0
}

window.addEventListener("scroll", function (e) {
  const scrollMaxSideBar = sidebarScroller.scrollHeight - sidebarScroller.clientHeight;
  const procent = 3;
  const procentScrollSideBar = Math.round(procent * scrollMaxSideBar / 100);
  const scrollTopSideBar = Math.round(sidebarScroller.scrollTop);
   
  if(state.pageYOffset > window.pageYOffset){
    sidebarScroller.scrollTop = scrollTopSideBar - procentScrollSideBar;
  } else if(state.pageYOffset < window.pageYOffset){
    sidebarScroller.scrollTop = scrollTopSideBar + procentScrollSideBar;
  }
  
  state.pageYOffset = window.pageYOffset;
});

Comments

[Полина Емельянова]

идея хорошая, НО!!! Скроллиться должно параллельно с окном, т.е. Скроллим главный контент или window - скроллиться сайдебар меню, если есть куда.

Так что стики крут... Но не сегодня.(

[imko]

Полина Емельянова, а прям точно должен? мне кажется не очень удобно было бы крутить страницу и получать вдовесок прокрутку меню, потом чтоб на первый пункт попасть его отдельно крутить обратно

[Полина Емельянова]

imko, Ну... Я пыталась отговорить... В общем реализовать Надо...

[szQocks]

Полина Емельянова,
так ?

const sidebarScroller = document.querySelector(".sidebar__scroller");

window.addEventListener("scroll", function (e) {
  const scrollMaxBody = document.body.offsetHeight - window.innerHeight;
  const procent = Math.round(window.scrollY * 100 / scrollMaxBody);
  
  const scrollMaxSideBar = sidebarScroller.scrollHeight - sidebarScroller.clientHeight;
  const scrollTop = Math.round(procent * scrollMaxSideBar /  100);
  sidebarScroller.scrollTop = scrollTop
});

[Полина Емельянова]

szQocks, Я так тоже пыталась. Проблема в том, что только мы начинаем скроллить основное окно - сайдебвр "прыгает". И вот этот то эффект я и не могу победить.
Т.е. надо сделать так, чтобы скролл сайдебара продолжался с того места, на котором остановился, а не "прыгал".(((

[szQocks]

Полина Емельянова,

const sidebarScroller = document.querySelector(".sidebar__scroller");

const state = {
  pageYOffset: 0
}

window.addEventListener("scroll", function (e) {
  const scrollMaxSideBar = sidebarScroller.scrollHeight - sidebarScroller.clientHeight;
  const procent = 3;
  const procentScrollSideBar = Math.round(procent * scrollMaxSideBar / 100);
  const scrollTopSideBar = Math.round(sidebarScroller.scrollTop);
   
  if(state.pageYOffset > window.pageYOffset){
    sidebarScroller.scrollTop = scrollTopSideBar - procentScrollSideBar;
  } else if(state.pageYOffset < window.pageYOffset){
    sidebarScroller.scrollTop = scrollTopSideBar + procentScrollSideBar;
  }
  
  state.pageYOffset = window.pageYOffset;
});

так устроит ?

[Полина Емельянова]

szQocks, Оформи как ОТВЕТ, а не камент, плз.))))

[szQocks]

Полина Емельянова, исправил же ответ

[szQocks]

Полина Емельянова, тут кстати нюанс есть, если например скролл в сайдбаре будет намного больше скролла основного на странице - тогда процент нужно высчитать или другой просто сделать, не 3 процента а например 5, короче процент подгонять над под верстку, ну в общем разберетесь)