Javascript/React: Overflow X Visible，Overflow Y Auto

Question

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

我在React中有一个粘性的侧边栏，当点击它时会显示一个选项菜单(见下面的截图)。在研究中，使用overflow-y-auto的overflow-x-visible是一个正在进行的问题。我已经实现了许多建议的解决方案，包括：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起作用？谢谢你的帮助！

Answer 1

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