Как с помощью JavaScript отследить вертикальную прокрутку элемента с верхней позиции?

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

1. **Отслеживание прокрутки**: Для отслеживания вертикальной прокрутки можно использовать событие `scroll` на элементе или окне.
2. **Прокрутка с учетом отступа**: Для реализации прокрутки с отступом мы можем использовать метод `scrollTo` или `scroll` с корректировкой позиции.

Ниже приведен пример реализации функции, которая скроллит элемент в представление с добавлением отступа сверху:

```javascript
function scrollToElementWithOffset(element, offset) {
    // Получаем позицию элемента относительно верхней части документа
    const elementPosition = element.getBoundingClientRect().top + window.scrollY;
    // Вычисляем желаемую позицию с учетом отступа
    const offsetPosition = elementPosition - offset;

    // Анимируем прокрутку
    window.scrollTo({
        top: offsetPosition,
        behavior: 'smooth' // Используем плавную прокрутку
    });
}

// Пример использования
const targetElement = document.querySelector('#yourElementId');
const offset = 100; // Задаем отступ сверху в пикселях

// Вызываем функцию прокрутки
scrollToElementWithOffset(targetElement, offset);
```

### Объяснение кода:
- `getBoundingClientRect().top` возвращает позицию элемента относительно видимой области.
- `window.scrollY` добавляется для получения абсолютной позиции относительно всей страницы.
- Мы вычисляем `offsetPosition`, вычитая значение отступа `offset`.
- Затем, используя `window.scrollTo`, мы прокручиваем страницу к нужной позиции с параметром `behavior: 'smooth'` для плавной анимации.

### Отслеживание прокрутки
Если вам также нужно отслеживать вертикальную прокрутку, вы можете добавить обработчик события `scroll`:

```javascript
window.addEventListener('scroll', () => {
    console.log('Current scroll position:', window.scrollY);
});
```

Этот обработчик будет выводить в консоль текущую позицию прокрутки при каждом событии `scroll`.

function scrollToElementWithOffset(element, offset = 0, behavior = 'smooth') {
    const elementTopPosition = element.getBoundingClientRect().top
    const offsetPosition = elementTopPosition + window.pageYOffset - offset
    
    window.scrollTo({
        top: offsetPosition,
        behavior,
    })
}

const targetElement = document.querySelector('#myElement');
scrollToElementWithOffset(targetElement, 100)
 
 
 ps или можете добавить перед блоком, к которому нужно прокрутить, элемент div с необходимым отступом и затем использовать метод scrollIntoView для скрола к нему