React App.js移动端浏览器滚动失效问题求助

问题场景 #

React应用采用双面板布局，左侧为菜单面板，右侧为内容展示面板。已为SplitPaneRight设置style={{ overflowY: 'auto', maxHeight: '100vh' }}以实现内容超出时滚动，PC端浏览器显示正常，但在智能手机浏览器中，右侧内容虽需多页展示，却仅能显示第一页，无法通过上下滑动查看全部内容。

相关代码 #

App.js

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate} from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import { Layout } from "./components/common/Layout";
import SplitPane, {
  Divider,
  SplitPaneLeft,
  SplitPaneRight,
} from "./components/common/SplitPane";
import Liubao from './components/Liubao';
import Sidebar from './components/Sidebar';
import ListWork from './components/ListWork';
import Itemdetail from './components/common/Itemdetail';
import helper from './components/lib/helper';
import global from './components/lib/global';

const App = () => {

  const [routes, setRoutes] = useState([]);

  useEffect(() => {
    let isActive = true, _routes=[];
    const asynctask = async (url) => {
      let _cates = [];
      try {
          _cates = await helper.getAPIp(url,  "GET"); //retrieve categories
          if (_cates.status === 200) {
              let cat = await _cates.json();
              cat.map(i => {
                let temp = {
                  path:`${i.value}`,
                  element:<ListWork title={i.name} cateid={i.id} />
                };
                _routes.push(temp);
              });
              if (isActive) {
                setRoutes(_routes);  
              };
          } else {
              setRoutes([]);
          } 
      } catch(err) {
          console.log(err); 
          setRoutes([]);
      }
    };
    let urlcate = `${global.BASE_URL}/api/categories/cates`; // no middleware required
    asynctask(urlcate);
    return () => isActive = false;
  }, []);
  
  return (
    <Layout>
      <SplitPane className="split-pane-row">
        <Router>
          <SplitPaneLeft>
            <Sidebar style={{ borderRight: '1px solid #ccc', padding: '0 16px' }} />
          </SplitPaneLeft>
          <Divider className="separator-col" />
          <SplitPaneRight style={{ overflowY: 'auto', maxHeight: '100vh' }}>
              <Routes>
                <Route key={routes.length+2} path={'/liubao'} element={<Liubao />} />
                {routes.map(({ path, element, index }, idx) => (
                  <Route key={idx} path={path} element={element} index={index} />
                ))}
                 <Route key={routes.length + 1} path={'/itemdetail'} element={<Itemdetail />} />
                 <Route path="/*" element={<Navigate to="/liubao" />} />
              </Routes>
          </SplitPaneRight>
        </Router>
      </SplitPane>
    </Layout>
  );
};

export default App;

Layout.js

import React from "react";
import Container from "react-bootstrap/Container";
export const Layout = (props) => {
    return (<Container>
        {props.children}
    </Container>
    )};

解决方法 #

1. 重置全局样式，修正视口高度计算 #

移动端浏览器默认的html/body边距会导致100vh的实际高度超出视口，滚动被外层容器截断。在全局CSS文件中添加：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

2. 调整Layout组件的容器样式 #

Container组件默认带有内边距，会压缩子元素高度。修改Layout.js，让容器占满整个视口：

import React from "react";
import Container from "react-bootstrap/Container";
export const Layout = (props) => {
    return (<Container fluid style={{ height: '100vh', padding: 0, margin: 0 }}>
        {props.children}
    </Container>
    )};

3. 优化右侧面板的滚动样式 #

为SplitPaneRight添加触摸滚动支持，确保移动端浏览器识别滚动行为：

<SplitPaneRight style={{ 
  overflowY: 'auto', 
  height: '100vh',
  WebkitOverflowScrolling: 'touch',
  touchAction: 'pan-y',
  flex: 1
}}>

4. 确保SplitPane父容器布局正确 #

检查自定义SplitPane组件的样式，确保采用flex布局并占满视口：

.split-pane-row {
  display: flex;
  height: 100vh;
  width: 100%;
}
.SplitPaneLeft {
  flex-shrink: 0; /* 左侧菜单保持固定宽度，不被压缩 */
}
.SplitPaneRight {
  flex: 1; /* 右侧面板占满剩余空间 */
}

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