javascript - 关闭 IonModel 和 IonPicker 后页面滚动回顶部

Question

我试图让用户选择选项，然后使页面滚动到正确的点。但是，IonModal 和 IonPicker 在成功滚动到用户选择的点后，会在选择器/模态关闭时弹回页面顶部。页面可能正在刷新，尽管没有任何改变导致这种情况（我知道）。

<IonModal isOpen={showModal}>
     <CustomModal props={selectionOfProps} callback={scrollToSelection}>
     </CustomModal>
        <IonButton onClick={() => setShowModal(false)}>Close Modal</IonButton>
</IonModal>

模式中的一些项目是可点击的，并且当模式打开或关闭时滚动到正确的元素并不重要。它调用（通过回调函数）：

document.getElementById("SELECTION").scrollIntoView({ behavior: "smooth" });

它会正确滚动到元素，但是一旦模式关闭，页面就会捕捉到顶部。如果我使用 IonPicker 用户选择一个选项并在处理程序中调用相同的东西，也会发生同样的事情。它可以正确滚动，但会弹回顶部。

奇怪的是，如果我只是硬编码要滚动的地方并将其用作按钮中的 onclick，例如：

<IonButton onClick={() => document.getElementById("SELECTION").scrollIntoView({ behavior: "smooth" })}>test scroll</IonButton>

它可以工作并且不会卡在顶部。将选择硬编码到模态回调函数中会导致它在关闭时捕捉到顶部。

我是离子和反应的新手，但似乎在模态或选择器被解雇后会调用某些东西，导致页面刷新（或类似的东西）。几个小时的调试和尝试各种选项，我无法弄清楚它为什么会这样。

标签： javascriptreactjsionic-framework