使用React Indiana Drag Scroll构建类表结构时首列滚动异常问题

我正在使用React Indiana Drag Scroll构建类表格结构，实现鼠标拖拽水平和垂直滚动功能，同时采用flex布局结合position:sticky属性固定首列，但滚动到特定位置时首列也会随之滚动。

问题原因 #

1. flex布局收缩影响：flex容器下的元素默认会自动收缩，导致首列宽度不稳定，破坏sticky定位的基础。
2. 定位上下文缺失：position:sticky依赖最近的滚动祖先作为定位上下文，如果滚动容器未设置正确的定位属性，sticky会失效。
3. 无背景覆盖：sticky元素没有背景色，滚动时会被后方内容穿透，看起来像是跟着滚动。

解决方案 #

以下是修改后的代码，针对上述问题逐一修复：

修改后的HTML

<div class="tabular--header-fixed tabular--side-col-fixed">
    <div class="scroll-container scroll-horizontal tjs-table-overflow indiana-scroll-container">
        <div class="tabular__header d-md-flex">
            <!-- 添加固定宽度与flex-shrink-0，避免宽度被压缩 -->
            <div class="inner-element w-200 flex-shrink-0">
                <div class="d-flex align-items-center justify-content-between w-100">
                    <h6 class="me-10 mb-0 text-truncate cursor-pointer">col1</h6>
                    <div class="d-flex align-items-center justify-content-end"></div>
                </div>
            </div>
            <!-- 其他表头列 -->
        </div>
        <div class="tabular__body">
            <div class="inner-section d-md-flex">
                <!-- 同样设置固定宽度与flex-shrink-0 -->
                <div class="inner-element align-items-start p-md-15 mb-20 mb-md-0 w-200 flex-shrink-0" style="z-index: 97;">
                    <div class="flex-grow-1">
                        <div class="d-flex align-items-start">
                            <div class="me-15"><input type="checkbox" id="custom-0" class="form-check-input"></div>
                            <div><a class="text-dark text-hover--primary fw-semibold text-capitalize fs-14 me-5" href="/admin/leads/leads-list/64a50aa0ab6fd22b981de353">ching chong</a></div>
                        </div>
                    </div>
                </div>
                <!-- 其他内容列 -->
            </div>
        </div>
    </div>
</div>

修改后的CSS

.tabular {
    &--header-fixed {
        @media screen and (min-width: 767px) {
            .tabular__header {
                position: sticky;
                top: 0;
                z-index: 99;
                /* 添加背景色避免被下方内容覆盖 */
                background-color: #ffffff;
            }
        }
    }

    &--side-col-fixed {
        @media screen and (min-width: 767px) {
            .scroll-horizontal {
                /* 设置为sticky元素的定位上下文 */
                position: relative;
                overflow: auto;

                .tabular__header .inner-element:first-child,
                .tabular__body .inner-element:first-child {
                    position: sticky;
                    left: 0;
                    /* 禁止flex收缩，保持宽度稳定 */
                    flex-shrink: 0;
                    /* 添加背景色避免被右侧内容穿透 */
                    background-color: #ffffff;
                    /* 提高层级确保显示在最上层 */
                    z-index: 98;
                }
            }
        }
    }
}

/* 自定义固定宽度类 */
.w-200 {
    width: 200px;
}

关键修复点 #

• 给首列元素设置固定宽度和flex-shrink:0，确保flex布局下元素宽度不会被压缩，维持sticky定位的稳定性。
• 为sticky元素添加背景色，滚动时避免被后方内容穿透覆盖。
• 给滚动容器.scroll-horizontal设置position:relative，明确作为sticky元素的定位上下文。
• 调整z-index层级，确保首列和表头在滚动时始终显示在其他内容上方。

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