左侧的粘性位置在 React 应用程序中不起作用

Posted 2023-03-07

【中文标题】左侧的粘性位置在 React 应用程序中不起作用

【英文标题】：Sticky position left does not work in React app

【发布时间】：2021-09-30 11:46:32

【问题描述】：

我正在使用样式化组件制作一个 React 项目。我有一个水平导航栏，它在滚动时会粘在顶部，但在向左或向右滚动时它不会粘在左边。我试过溢出：可见，显示：inline-flex，并设置left：0。没有任何效果。这是我的代码：

样式化组件：

// This is the horizontal nav bar
export const OrganizerMainNav = styled.nav`
    display: inline-flex;
    position: sticky;
    left: 0 !important;
    top: 0;
    z-index: 998; 
    align-self: flex-start;
    overflow: visible;
    width: 100%;
   
    flex-grow: 0;
    flex-shrink: 0;

    background-color: rgba(34,39,46,1);
    min-height: 80px;
    justify-content: space-between;
    align-items: center;
    color: #f5f5f5;
    border-radius: 1rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom: 1px solid rgba(68,76,86,.5);
`;

（完整来源：https://github.com/Nellak2017/Task-Organizer-JS/blob/main/client/task-organizer-js/src/components/SideNav/SideNav.elements.js）

如果需要，您可以查看我的 Github 存储库以获取更多上下文。

我已经尝试了我能想到的一切，但我仍然感到沮丧。任何帮助将不胜感激！

【问题讨论】：

width: 100%; ，应该删除 否则，与父级一样大，它会粘在里面，但也会随之滚动。粘性元素保持在流动中并保持粘性，直到它到达它所粘的容器的相对边缘或被另一个粘性元素推动。 :) 试试不带宽度的。

【参考方案1】：

我终于解决了这个问题。问题是表格嵌套在一个部分内，并且该部分没有任何 CSS 来处理溢出的子项。因此，最简单的答案是：

overflow-x: auto;

到父样式组件，以便子表留在该部分内。这也消除了必须移动的标题，而是让表格滚动。