如何解决滚动表格中sticky左侧固定列无法固定的问题

安全阿岳

2026-6-15

问题描述

我想要实现一个左侧带有固定列的滚动表格，但设置了sticky属性的DOM元素无法固定。需要实现向右滚动时左侧红色文本保持固定，同时表格支持上下滚动。以下是我的代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper{width: 400px;height: 100px;overflow-x: auto;overflow-y: hidden;}
        .container {width: 1000px;overflow-y: auto;overflow-x: hidden;height: 150px;}
        .list {white-space: nowrap;width: 1000px;}
        .list span {display: inline-block;width: 50px;line-height: 50px;}
        .fix {position: sticky;left: 0px;background: red;color: white;}
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <div class="list">
                <span class="fix">TEXT 1</span>
                <span>TEXT 2</span>
                <span>TEXT 3</span>
                <span>TEXT 4</span>
                <span>TEXT 5</span>
                <span>TEXT 6</span>
                <span>TEXT 7</span>
                <span>TEXT 8</span>
                <span>TEXT 9</span>
                <span>TEXT 10</span>
            </div>
            <div class="list">
                <span class="fix">TEXT 1</span>
                <span>TEXT 2</span>
                <span>TEXT 3</span>
                <span>TEXT 4</span>
                <span>TEXT 5</span>
                <span>TEXT 6</span>
                <span>TEXT 7</span>
                <span>TEXT 8</span>
                <span>TEXT 9</span>
                <span>TEXT 10</span>
            </div>
            <div class="list">
                <span class="fix">TEXT 1</span>
                <span>TEXT 2</span>
                <span>TEXT 3</span>
                <span>TEXT 4</span>
                <span>TEXT 5</span>
                <span>TEXT 6</span>
                <span>TEXT 7</span>
                <span>TEXT 8</span>
                <span>TEXT 9</span>
                <span>TEXT 10</span>
            </div>
            <div class="list">
                <span class="fix">TEXT 1</span>
                <span>TEXT 2</span>
                <span>TEXT 3</span>
                <span>TEXT 4</span>
                <span>TEXT 5</span>
                <span>TEXT 6</span>
                <span>TEXT 7</span>
                <span>TEXT 8</span>
                <span>TEXT 9</span>
                <span>TEXT 10</span>
            </div>
            <div class="list">
                <span class="fix">TEXT 1</span>
                <span>TEXT 2</span>
                <span>TEXT 3</span>
                <span>TEXT 4</span>
                <span>TEXT 5</span>
                <span>TEXT 6</span>
                <span>TEXT 7</span>
                <span>TEXT 8</span>
                <span>TEXT 9</span>
                <span>TEXT 10</span>
            </div>
        </div>
    </div>
</body>
</html>

解决方案

问题核心是滚动容器层级冲突：外层wrapper负责横向滚动，但内层container设置了overflow-x: hidden，导致sticky元素的滚动参考容器被错误限制，无法跟随外层横向滚动固定。同时wrapper高度设置过小，影响纵向滚动体验。

调整方案：

合并滚动容器，让container同时处理横向和纵向滚动
移除wrapper的overflow-x: auto和container的overflow-x: hidden，统一由container控制滚动
给sticky元素添加z-index，避免被其他单元格遮挡
调整容器高度，保证纵向滚动区域足够

修改后的完整代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 400px;
            height: 150px;
            overflow: auto; /* 同时支持横向和纵向滚动 */
        }
        .list {
            white-space: nowrap;
            width: 1000px;
        }
        .list span {
            display: inline-block;
            width: 50px;
            line-height: 50px;
            border: 1px solid #eee; /* 可选：添加边框区分单元格 */
        }
        .fix {
            position: sticky;
            left: 0;
            background: red;
            color: white;
            z-index: 1; /* 防止被其他单元格覆盖 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="list">
            <span class="fix">TEXT 1</span>
            <span>TEXT 2</span>
            <span>TEXT 3</span>
            <span>TEXT 4</span>
            <span>TEXT 5</span>
            <span>TEXT 6</span>
            <span>TEXT 7</span>
            <span>TEXT 8</span>
            <span>TEXT 9</span>
            <span>TEXT 10</span>
        </div>
        <div class="list">
            <span class="fix">TEXT 1</span>
            <span>TEXT 2</span>
            <span>TEXT 3</span>
            <span>TEXT 4</span>
            <span>TEXT 5</span>
            <span>TEXT 6</span>
            <span>TEXT 7</span>
            <span>TEXT 8</span>
            <span>TEXT 9</span>
            <span>TEXT 10</span>
        </div>
        <div class="list">
            <span class="fix">TEXT 1</span>
            <span>TEXT 2</span>
            <span>TEXT 3</span>
            <span>TEXT 4</span>
            <span>TEXT 5</span>
            <span>TEXT 6</span>
            <span>TEXT 7</span>
            <span>TEXT 8</span>
            <span>TEXT 9</span>
            <span>TEXT 10</span>
        </div>
        <div class="list">
            <span class="fix">TEXT 1</span>
            <span>TEXT 2</span>
            <span>TEXT 3</span>
            <span>TEXT 4</span>
            <span>TEXT 5</span>
            <span>TEXT 6</span>
            <span>TEXT 7</span>
            <span>TEXT 8</span>
            <span>TEXT 9</span>
            <span>TEXT 10</span>
        </div>
        <div class="list">
            <span class="fix">TEXT 1</span>
            <span>TEXT 2</span>
            <span>TEXT 3</span>
            <span>TEXT 4</span>
            <span>TEXT 5</span>
            <span>TEXT 6</span>
            <span>TEXT 7</span>
            <span>TEXT 8</span>
            <span>TEXT 9</span>
            <span>TEXT 10</span>
        </div>
    </div>
</body>
</html>

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