javascript - 滚动到 id 在全屏模式下不起作用

Question

我创建了一个脚本来启用/禁用网页中的全屏（React JS）。在网页中单击按钮网页滚动到顶部。滚动到顶部在普通网页中工作正常，但启用全屏时滚动不起作用。此外，我使用 scrollToElement React JS 包进行滚动，但这也不起作用。

从“反应”导入反应；导入{FullScreen，使用FullScreenHandle}

export const A = () => {
 /* Click handler to enable the scroll to root*/
 handleClick = () => {
   window.scrollTo( 0, 0)
}
 return (<FullScreen handle={handle}>
    <button onclick={ () => handleClick() }>Scroll To Top</button>
</FullScreen>)
}
    
In Fullscreen scroll is not working.

标签： javascriptreactjs

Answer 1

使用的第三方库react-full-screen有一个实现，当FullScreen组件进入全屏时，它将包含设置div为height: 100%without overflow: auto/scroll。

因此，元素占据全屏并且内容溢出而不滚动。因此，我们需要overflow正确设置并将滚动功能设置为包含div而不是body.

这div是包在其上激活全屏时的包含元素。

在这里查看实现。在新选项卡中打开预览以使全屏正常工作。