Как использовать прокрутку для просмотра в панели расширения

#javascript #vue.js #scroll #scrolltop

#javascript #vue.js #прокрутка #scrolltop

Вопрос:

Контекст: я пытаюсь добиться этого -> https://hhk6r.csb.app /

Макет:

введите описание изображения здесь

Проблема:

Прокрутка для просмотра в элементе div не приводит к прокрутке до начала панели расширения.

введите описание изображения здесь

Документы: https://developer.mozilla.org/ru-US/docs/Web/API/Element/scrollIntoView

Я попытался использовать опцию block: ‘start’, указанную в документах, но не смог понять, где я ошибаюсь, любые предложения были бы полезны.

Я создал codesandbox, чтобы воспроизвести проблему, это то, что я пробовал до сих пор.

https://codesandbox.io/s/scroll-issue-kyoxf

Комментарии:

1. Пробовал использовать scroll-margin-top на родительском элементе (div)) всей панели расширения. codesandbox.io/s/scroll-issue-forked-4q91s?file=/src/App.vue

2. О, мой плохой, да. Этот используется в случае некоторого ванильного поведения с привязкой, подобной href="div#my-section-1" . Здесь, похоже, у вас есть какое-то другое поведение, попробуйте повторить прокрутку вниз с помощью JS или переключиться на привязку к href. может быть решением.

Ответ №1:

Помимо вашей текущей работы, вы могли бы правильно компенсировать все это с помощью

 scroll-margin-top: 2rem;
 

Вся слава Джошу Комо и его хорошему твиту, который можно найти здесь: https://twitter.com/joshwcomeau/status/1332015868725891076?lang=en

Ответ №2:

Простой способ — правильно сместить верхнюю часть поля с помощью scroll-margin-top