在React中使用Scroll嵌套Scroll，出现里面Scroll滚动条超出高度却滚动没反应的问题，解决方案添加nestedScrollEnabled

蓉妹妹2026-02-04 14:39

在 React 中使用嵌套的 Scroll 组件时，如果内部的 Scroll 滚动条无法拖动，通常是由于嵌套滚动处理机制的问题所导致。这种问题常见于 ScrollView 或类似组件在嵌套使用时，父级滚动视图拦截了子级的滚动事件，导致内部滚动条无法正常响应拖动。

使用 nestedScrollEnabled 属性（适用于 React Native）
在 React Native 中，可以尝试设置 nestedScrollEnabled 属性为 true，以允许嵌套滚动的处理。

cpp 复制代码

<ScrollView nestedScrollEnabled={true}>
  <ScrollView nestedScrollEnabled={true}>
    {/* 内部滚动内容 */}
  </ScrollView>
</ScrollView>

使用 scrollEnabled 控制滚动行为
确保内部的滚动组件没有被外部滚动容器禁用。可以显式设置 scrollEnabled 为 true，以允许其滚动。

cpp 复制代码

<ScrollView scrollEnabled={true}>
  <ScrollView scrollEnabled={true}>
    {/* 内部滚动内容 */}
  </ScrollView>
</ScrollView>

使用第三方滚动库
如果原生滚动行为无法满足需求，可以考虑使用第三方库如 react-perfect-scrollbar 或 react-custom-scrollbars，这些库可以提供更可控的滚动条行为。

cpp 复制代码

import PerfectScrollbar from 'react-perfect-scrollbar';

<PerfectScrollbar>
  <div>
    {/* 内部滚动内容 */}
  </div>
</PerfectScrollbar>

通过上述方法，可以有效解决嵌套滚动时内部滚动条无法拖动的问题。具体使用哪种方式，需要根据项目所使用的框架（如 React Native 或 Web）和具体需求进行选择。、、、