React 主页滚动失灵？别担心，来看看如何解决

2024-03-01 03:30:52

React 主页滚动问题：导航后恢复滚动功能

作为一名资深的程序员，我最近遇到了一项棘手的任务，即修复一个 React 应用程序中出现的滚动问题。在该应用程序中，当用户从主页导航到其他页面再返回时，主页失去了滚动功能。让我带你深入了解我是如何解决这个谜题的，并为你的项目提供有价值的见解。

问题

在我们使用 React 构建的应用程序中，当缩小浏览器窗口至移动设备尺寸，并从主页导航到其他页面后再返回时，主页（且仅主页）失去了滚动功能。此问题仅在使用 Bootstrap Offcanvas 作为导航栏时发生。

根源探究：

为了找到问题的根源，我仔细审查了相关的代码，并注意到以下潜在原因：

外部 div 中的 overflowX: "hidden" 设置阻止了水平滚动，在移动设备尺寸下可能引发问题。
外部 div 使用 100vh 作为高度，在浏览器窗口高度发生变化时可能导致高度计算不正确。

解决方案：

基于对问题的分析，我提出了两个解决方案来解决滚动问题：

解决方案 1：删除溢出隐藏

通过删除 overflowX: "hidden" 设置，我消除了阻止水平滚动的限制，从而恢复了主页的滚动功能。

解决方案 2：重新计算高度

为了解决高度计算不正确的问题，我使用 calc() 函数动态计算外部 div 的高度，确保它始终等于浏览器窗口的高度。

更新后的代码：

更新后的代码如下：

return (
    <div style={{ height: "calc(100vh)" }}>
      <div
        style={{
          background: "linear-gradient(to bottom, #73a2d2, #a0b4cd)", 
          height: "100vh", 
          width: "100vw"
        }}
      >
        //此处包含内容
      </div>
      <div
        style={{
          backgroundColor: "#dad9d1",
          padding: "4rem",
          display: "flex",
          flexDirection: "column",
          alignItems: "center", 
          textAlign: "center",
        }}
      >
        //此处包含内容
      </div>
    </div>)