React JS全屏模式下scrollTo与scrollToElement滚动到顶部失效如何解决

问题根源 #

当元素进入全屏状态后，全局window不再是滚动承载对象，滚动行为会被限制在被设置为全屏的容器内部，此时操作window.scrollTo不会有任何效果。

解决方案 #

你需要给全屏容器绑定DOM引用，直接操作该容器的滚动属性即可，同时先修正你代码里的几处语法问题：

• 未执行useFullScreenHandle获取全屏实例
• 点击事件要写驼峰格式onClick
• 函数组件内的方法需要用const声明

可运行的修正代码 #

import React, { useRef } from 'react';
import { FullScreen, useFullScreenHandle } from 'react-full-screen';

export const A = () => {
  const handle = useFullScreenHandle();
  // 绑定全屏容器的ref
  const fullScreenContainerRef = useRef(null);

  const handleClick = () => {
    // 直接操作全屏容器的滚动
    if (fullScreenContainerRef.current) {
      fullScreenContainerRef.current.scrollTo({
        top: 0,
        behavior: 'smooth' // 不需要平滑滚动可以删除该参数
      });
      // 也可以直接赋值scrollTop：fullScreenContainerRef.current.scrollTop = 0
    }
  };

  return (
    <FullScreen handle={handle} ref={fullScreenContainerRef}>
      <button onClick={() => handleClick()}>Scroll To Top</button>
      {/* 此处放置你的页面长内容 */}
    </FullScreen>
  );
};

兼容不支持透传ref的FullScreen组件 #

如果你用的FullScreen封装组件不支持透传ref，可以自己在内部套一层占满全屏的滚动容器：

<FullScreen handle={handle}>
  <div 
    ref={fullScreenContainerRef} 
    style={{ height: '100vh', width: '100vw', overflow: 'auto' }}
  >
    <button onClick={() => handleClick()}>Scroll To Top</button>
    {/* 其余页面内容 */}
  </div>
</FullScreen>

内容的提问来源于stack exchange，提问作者vikas dhiman