Question

我创建了一个带有固定左列的HTML表（代码是SO上另一篇文章的简化版）。当我在iOS模拟器上查看时，表格的右半部分正确滚动，但是，它不显示滚动条，并且不会随惯性滚动。

表格示例：http://jsfiddle.net/jakechasan/94aP4/

以下是基本代码：

HTML：

<div id="tableContainer">
    <table>
        <tbody>
            <tr>
                <td class="leftColumn">Row 1</td>
                <td>efhiubcebucefbuiceguceuceiuceuceu0v8cev8ceserybewqbyuqw0uqr0</td>
            </tr>
        </tbody>
    </table>
</div>

CSS：

    #tableContainer {
        width: 200px;
        overflow-x:scroll;
        margin-left:5em;
        overflow-y:visible;
        padding-bottom:1px;
        background-color: yellow;
    }
    table {
        border-collapse:separate;
        border-top: 3px solid grey;
    }
    td {
        margin:0;
        border:3px solid grey;
        border-top-width:0px;
        white-space:nowrap;
    }
    .leftColumn {
        position:absolute;
        width:5em;
        left:0;
        top:auto;
        border-right: 0px none black;
        border-top-width:3px;
        /*only relevant for first row*/
        margin-top:-3px;
        /*compensate for top border*/
    }

有谁知道如何激活惯性滚动，并显示滚动条？

Answer 1

我通过以下方式解决了这个问题：

-webkit-overflow-scrolling: touch; //adding this line will enable inertial scrolling

来源：http://cooshtee.com/blog/2012/11/add-inertial-scrolling-to-a-fixed-height-div-in-ios/

带有HTML表格的iOS滚动惯性和滚动条

1 个答案: