У меня есть родительский компонент, в котором есть 4 дочерних компонента, каждый из которых - панель PrimeNg с формой внутри. Первые 3 панели раскрываются всегда (значки свертывания и раскрытия установлены на пустые строки), а последняя сворачивается при загрузке. На последней панели у меня есть кнопка, которая позволяет вам «редактировать» информацию, которая появляется внутри нее и расширяет панель.
То, что я хотел бы, чтобы эта 4-ая панель затем перетаскивалась в верхнюю часть экрана. Однако на самом деле происходит расширение панели, и полоса прокрутки перемещается вверх, но сама панель остается на месте.
Я пробовал несколько разных вариантов, чтобы заставить это работать, используя различные комбинации scrollTop, offsetTop, scrollIntoView и т. Д., Но ничего не помогло. Полоса прокрутки перемещается, но содержимое не перемещается, оно остается там, где оно было.
Я даже пытался установить идентификатор элемента на полпути вниз по форме на последней панели, а затем использовал scrollIntoView: {block: 'center'} как вариант ... все равно ничего, то же самое, она прокручивает полосу прокрутки, но не содержимое.
Может кто-нибудь помочь мне с этим и сообщить мне, что я делаю неправильно?
в родительском компоненте:
<p-panel1></p-panel1>
<p-panel2></p-panel2>
<p-panel3></p-panel3>
<p-panel4 id='scrollToHere'></p-panel4> <---I want to scroll p-panel4 to top of the window
when the edit button is clicked
ОБНОВЛЕНИЕ: Исправлено с помощью setTimeout(document.getElementById('scrollToHere').scrollIntoView({behavior: 'smooth', block: 'start'}),0)
, должно быть одной из тех странных вещей DOM, где он пытался прокрутить перед расширением панели. ... попробую изменить его на onAfterToggle, но не уверен, сработает ли это, потому что я не использую иконки и использую кнопку для этого.