将 -webkit-overflow-scrolling 与具有固定第一列的 table 一起使用

Question

我在我们的应用程序中创建了几个 table，它们使用 the method in this jsfiddle 固定第一列，其余 table 内容在其下方滚动。

我面临的问题是我想为 x-overflow 内容启用动量滚动，但是一旦我添加了 -webkit-overflow-scrolling: touch;规则，它使整个 table 可滚动，将固定的第一列行为重置回标准 table 行为。根据MDN page on -webkit-overflow-scrolling，它创建了一个新的堆栈上下文。我想这就是它打破绝对定位第一列的原因。

有什么办法解决这个问题吗？在没有动量滚动的情况下在移动设备上滚动 table 非常尴尬，因为一旦我的手指离开屏幕，滚动就会突然停止。

截图：

HTML:

<div class="fixed-table-container">
    <div class="fixed-table-body">
        <table id="table">

CSS:

.fixed-table-container {position: relative;}

.fixed-table-body {overflow-x: scroll; -webkit-overflow-scrolling: touch; height: 100%;}

#table > tbody > tr > td:first-child {
        position: absolute;
        display: inline-block;
        background-color: #fff;
        border-right: 2px solid #222;
        z-index: 9;
        left: 0;
        height: 44px;
        width: 26px;
        line-height: 46px;
    }

#table > tbody > tr > td:nth-child(2) {
        padding-left: 56px !important;
    }

Answer 1

我遇到了同样的问题。解决方案是移除移动的固定列。显然 -webkit-overflow-scrolling 会破坏任何具有绝对位置或固定位置的 child。

将 -webkit-overflow-scrolling 与具有固定第一列的 table 一起使用

Use -webkit-overflow-scrolling with a table that has a fixed first column

html

css

mobile-safari