Как реализовать пролистывание блока при прокрутке с учётом скролла страницы?

Чтобы реализовать пролистывание блока при прокрутке с учетом скролла страницы в JavaScript, можно использовать следующий подход:

1. Начните с добавления обработчика события прокрутки к объекту window:

window.addEventListener('scroll', onScroll);

2. Создайте функцию обработчика события onScroll():

function onScroll() {
  // Ваш код для обработки прокрутки
}

3. Внутри функции onScroll() получите значения вертикальной прокрутки страницы и высоты видимой области окна:

var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
var windowHeight = window.innerHeight || document.documentElement.clientHeight;

4. Затем определите позицию блока относительно верхней границы страницы и его высоту:

var block = document.getElementById('myBlock'); // Замените 'myBlock' на ID вашего блока
var blockOffsetTop = block.offsetTop;
var blockHeight = block.offsetHeight;

5. Проверьте, находится ли верхняя граница блока в видимой области окна:

if (blockOffsetTop >= scrollTop && blockOffsetTop < scrollTop + windowHeight) {
  // Блок находится в видимой области окна
} else {
  // Блок находится за пределами видимой области окна
}

6. Если блок находится за пределами видимой области окна, прокрутите страницу до его верхней границы:

if (blockOffsetTop < scrollTop) {
  window.scrollTo(0, blockOffsetTop);
} else if (blockOffsetTop + blockHeight > scrollTop + windowHeight) {
  window.scrollTo(0, blockOffsetTop + blockHeight - windowHeight);
}

7. Весь код может выглядеть так:

window.addEventListener('scroll', onScroll);

function onScroll() {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  var windowHeight = window.innerHeight || document.documentElement.clientHeight;

  var block = document.getElementById('myBlock'); // Замените 'myBlock' на ID вашего блока
  var blockOffsetTop = block.offsetTop;
  var blockHeight = block.offsetHeight;

  if (blockOffsetTop >= scrollTop && blockOffsetTop < scrollTop + windowHeight) {
    // Блок находится в видимой области окна
  } else {
    // Блок находится за пределами видимой области окна
    if (blockOffsetTop < scrollTop) {
      window.scrollTo(0, blockOffsetTop);
    } else if (blockOffsetTop + blockHeight > scrollTop + windowHeight) {
      window.scrollTo(0, blockOffsetTop + blockHeight - windowHeight);
    }
  }
}

Такой подход позволит автоматически прокручивать страницу к блоку, если блок находится за пределами видимой области окна при прокрутке.