ScrollIntoView 行为平滑在反应中被破坏答案

【问题标题】：ScrollIntoView behavior smooth is broken in reactScrollIntoView 行为平滑在反应中被破坏
【发布时间】：2020-01-17 07:25:41
【问题描述】：

我有一个包含多行的表格，每行都有一个按钮，单击其中任何一个按钮时，我希望它滚动到顶部以及一些我如何实现它但滚动不流畅，它直接跳到那个div，我使用了多个 npm 库，polyfill（由 chrome 团队在 github 问题上建议），使用窗口对象，尝试更改 chrome://flags（启用平滑滚动）但其中任何一个都不起作用... 如果我在没有({behavior: "smooth"}) 的情况下使用它，它会直接跳到它上面，当我使用({behavior: "smooth"}) 时，它会像滚动到顶部（比如 1 毫米）一样破碎 100 毫秒，然后像滞后一样停止。

请帮忙！！！

smoothscroll.polyfill();

const top = useRef();
const Component=()=>{
  const scrollToTop = () => {
    top.current.scrollIntoView({
      behavior: "smooth"
    });
  };

  const list=()=> (
    data.map((item)=> {
      return(
        <Row>
          <Column>
            {data.id}
          </Column>
          <Column>
            {data.name}
          </Column>
          <Column>
            {data.section}
          </Column>
          <Column>
            <button onClick={()=>scrollToTop()}>
              manage
            <button>
          </Column>
        </Row>
      );
    });
  )

  return (
    <div ref="top"/>
    {list()}
  );
}

【问题讨论】：

似乎是 Chromium 问题。我在 Angular 组件中遇到了同样的问题，但仅在 Chrome 和 Edge 中.. Firefox 工作正常。

标签： reactjs

【解决方案1】：

我自己更喜欢@Partha Roy 解决方案，但如果您喜欢更多控制，请使用window.scroll()

试试这个：

const App = () => {
  
  const elementRef = React.useRef(null)
  
  const toTop = () => {
    window.scroll({
      top: 0,
      left: 0,
      behavior: "smooth"
    })
  }
  // If back to element (use Ref)
  const toElemnt = () => {
     if(!elementRef) return
    // Get element coords from Ref
    const element =
      elementRef.current.getBoundingClientRect().top + window.scrollY

    window.scroll({
      top: element,
      behavior: "smooth"
    })
  }
  
  return (
    <div className="App">
      <div className="content" style={{ height: 1500 }}>Scroll Down <span>&#8595;</span>
      
        <div ref={elementRef} style={{ marginTop: 750 }}>
          Element - continue scrolling <span>&#8595;</span>
        </div>
      </div>
       <button onClick={toElemnt}>Back to Element <span>&#8593;</span></button>
      <button onClick={toTop}>Back to to <span>&#8593;</span></button>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById("root"))

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

【讨论】：

在上下文对象中围绕组件传递引用时，使用window.scroll 是唯一对我有用的解决方案；传入选项对象破坏了滚动功能。

【解决方案2】：

如果您使用ref，则将其分配给目标元素：

const top= useRef();

在这里分配给这个：

return(
    <div ref={top}/>
    {list()}
);

【讨论】：

【解决方案3】：

您可以使用 CSS 选项将应用程序的滚动行为设置为平滑。

html {
  scroll-behavior: smooth;
}

【讨论】：