反应滚动位置在状态更新时跳转

问题描述

尝试使用useState钩子来实现一个带有反应的简单的显示更多按钮。一切工作正常，只不过当在垂直滚动位置上切换内容时，将显示的div大小减小了。换句话说，显示的内容位于“显示更多”按钮上方，而不是扩展文本并将滚动位置保持在文本的开头。我已经在所有地方搜索了所有内容，但是在不记住和恢复滚动位置的情况下无法找到一个优雅的解决方案。这是显示我的问题的示例代码。

import {useState} from "react"

export default function Test() {
    let text = (
        <p>
            Lorem ipsum dolor sit amet,consectetur adipiscing elit. Donec aliquet porttitor vulputate. Morbi pellentesque blandit est vel
            dictum. Fusce mattis dolor in diam tempor commodo. Integer eu consequat magna. Cras placerat magna vitae nunc auctor,quis
            sodales ex hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis dapibus condimentum elementum.
            Phasellus ultrices quis quam vel dignissim. Suspendisse ac sapien iaculis,suscipit nunc vel,commodo lorem. Vestibulum a arcu
            ut mi commodo ullamcorper. Vestibulum massa nunc,sodales a diam et,condimentum finibus quam. Nulla aliquet lacus id rhoncus
            maximus. Phasellus sed vehicula erat,eget suscipit ipsum. Donec nulla arcu,luctus nec mattis eu,cursus sit amet libero.
            Nullam at egestas orci. Sed tempus convallis enim vitae rutrum. Sed mattis vel dolor eu laoreet. Nam a aliquet massa,eu
            vulputate lacus. Fusce condimentum,eros in scelerisque dictum,turpis nisl sagittis diam,auctor blandit massa nunc eget purus.
            Praesent vitae ultrices risus. Vivamus sed leo ipsum. Maecenas rhoncus,urna sit amet interdum maximus,risus odio ullamcorper
            aug
        </p>
    )

    const [show,setShow] = useState(false)

    return (
        <>
            <div style={{height: 1000,backgroundColor: "red"}}></div>
            <button onClick={() => setShow(!show)}>THIS IS HOW I WANT IT TO WORK</button>
            <div style={{width: "20%"}}>{show ? text : "Not showing anything"}</div>
            <button onClick={() => setShow(!show)}>BUT ON THIS BUTTON THAT IS BELOW TEXT</button>
            <div style={{height: 1000,backgroundColor: "blue"}}></div>
        </>
    )
}

可运行的代码段：

function Test() {
    let text = (
        <p>
            Lorem ipsum dolor sit amet,setShow] = React.useState(false)

    return (
        <div>
            <div style={{height: 1000,backgroundColor: "blue"}}></div>
        </div>
    )
}

ReactDOM.render(<Test/>,document.getElementById("test"));

<body>
  <div id="test"></div>

  <!-- React.js CDN links -->
  <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>

  <!-- Babel (essential for JSX syntax - https://babeljs.io/docs/en/#jsx-and-react) -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

</body>

解决方法

我已经解决了！在Chrome CSS中，默认情况下，属性overflow-anchor为auto，这反过来又使单击的按钮成为滚动锚。因此，在加载新内容时，窗口将与锚点一起滚动。为了解决此问题，您可以全局设置overflow-anchor: none;或按钮本身。

function Test() {
    let text = (
        <p>
            Lorem ipsum dolor sit amet,consectetur adipiscing elit. Donec aliquet porttitor vulputate. Morbi pellentesque blandit est vel
            dictum. Fusce mattis dolor in diam tempor commodo. Integer eu consequat magna. Cras placerat magna vitae nunc auctor,quis
            sodales ex hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis dapibus condimentum elementum.
            Phasellus ultrices quis quam vel dignissim. Suspendisse ac sapien iaculis,suscipit nunc vel,commodo lorem. Vestibulum a arcu
            ut mi commodo ullamcorper. Vestibulum massa nunc,sodales a diam et,condimentum finibus quam. Nulla aliquet lacus id rhoncus
            maximus. Phasellus sed vehicula erat,eget suscipit ipsum. Donec nulla arcu,luctus nec mattis eu,cursus sit amet libero.
            Nullam at egestas orci. Sed tempus convallis enim vitae rutrum. Sed mattis vel dolor eu laoreet. Nam a aliquet massa,eu
            vulputate lacus. Fusce condimentum,eros in scelerisque dictum,turpis nisl sagittis diam,auctor blandit massa nunc eget purus.
            Praesent vitae ultrices risus. Vivamus sed leo ipsum. Maecenas rhoncus,urna sit amet interdum maximus,risus odio ullamcorper
            aug
        </p>
    )

    const [show,setShow] = React.useState(false)

    return (
        <div>
            <div style={{height: 1000,backgroundColor: "red"}}></div>
            <button onClick={() => setShow(!show)}>THIS IS HOW I WANT IT TO WORK</button>
            <div style={{width: "20%"}}>{show ? text : "Not showing anything"}</div>
            <button onClick={() => setShow(!show)}>BUT ON THIS BUTTON THAT IS BELOW TEXT</button>
            <div style={{height: 1000,backgroundColor: "blue"}}></div>
        </div>
    )
}

ReactDOM.render(<Test/>,document.getElementById("test"));

body {
    overflow-anchor: none;
}

<body>
  <div id="test"></div>

  <!-- React.js CDN links -->
  <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>

  <!-- Babel (essential for JSX syntax - https://babeljs.io/docs/en/#jsx-and-react) -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

</body>

google-chrome reactjs reactjs

反应滚动位置在状态更新时跳转

问题描述

解决方法

相关问答