Javascript/React：溢出 X 可见，溢出 Y 自动

Posted 2023-03-07

【中文标题】Javascript/React：溢出 X 可见，溢出 Y 自动

【英文标题】：Javascript/React: Overflow X Visible, Overflow Y Auto

【发布时间】：2021-11-15 01:50:30

【问题描述】：

是否有基于 React/javascript 的解决方案来修复 overflow-x-visible 和 overflow-y-auto 问题？

我在 React 中有一个粘性侧边栏，单击它会显示一个选项菜单（请参见下面的屏幕截图）。研究overflow-x-visible 和overflow-y-auto 是一个持续存在的问题。我已经实现了一些建议的解决方案，包括：style="padding-bottom: 250px; margin-bottom: -250px; 和创建更宽的 div 容器 here 和 here。我也一直在学习this 教程。但是，我无法让它适用于我的用例。

使用 Tailwind CSS 的缩短代码：

<Sidebar className="h-96 overflow-y-auto overflow-x-visible">
    <SidebarItemNew className="relative">      
         <DropdownOptions className="absolute"/>
    </SidebarItemNew>     
</Sidebar>

有什么方法可以让它在 React 中工作？感谢您的帮助！

【问题讨论】：

会不会是 z-index 的问题？如果右侧的容器是不同的组件，则可能是堆叠The stacking context 的问题（我在推测）

@RDU 你的评论让我思考，我将在响应中探索门户：reactjs.org/docs/portals.html。来自文档：“门户的典型用例是父组件具有溢出：隐藏或 z-index 样式，但您需要子组件在视觉上“突破”其容器。例如，对话框、悬停卡和工具提示。”听起来很有希望！

我们在这里的问题中没有那么“解决”。如果您发现了自己的答案，您可以发布并接受它。否则你可以删除你的问题

@j08691 注意，谢谢！

【参考方案1】：

为了解决这个问题，我使用 React Portal 将子元素拆分为它自己的 DOM 节点。然后我按照this 教程使用了 React Popper。现在效果很好！