Question

我在div中有一个表，CSS属性overflow-y设置为滚动。当我用鼠标滚轮滚动表格一个增量（即点击一下鼠标滚轮）时，桌面会在Firefox和Chrome中滚动不同的数量。但是，如果我单击滚动条滑块下方的区域，则表格会在两个浏览器中滚动相同的数量。以下是演示此行为的示例：https://jsfiddle.net/rgxb6dz6/3/

HTML

<body>
    <div id='container'>
        <table id='table'>
        </table>
    </div>
</body>

CSS

table {
    border: 1px solid gray;
    border-collapse: collapse;
    font-family: sans-serif;
    font-size: 12px;
    margin: 2px;
    table-layout: fixed;
    width: 99%;
}

td {
    border: 1px solid gray;
    overflow: hidden;
    padding: 2px;
    white-space: nowrap;
    text-align: right;
}

th {
    border: 1px solid gray;
    overflow: hidden;
    padding: 2px;
}

#container {
    overflow-y: scroll;
    height: 200px;
    width: 200px;
    border: 1px solid black;
}

的JavaScript

$(function() {
    for(i = 0; i < 100; i++) {
        var tr = $('<tr>');
        var td = $('<td>' + i + '</td>');
        $(tr).append(td);
        for(j = 0; j < 5; j++) {
            td = $('<td>' + Math.round(Math.random() * 10000) + '</td>');
            $(tr).append(td);
        }
        $('#table').append(tr);
    }
});

有没有办法控制表格在使用鼠标滚轮时滚动多少以使其在浏览器中保持一致？

Answer 1

是的，有办法，但这并不容易，你需要发挥创意。

您需要：

收听触发滚动的任何事件（鼠标滚轮，向上翻页，向下翻页，键盘箭头..）
阻止事件实际滚动内容
确定滚动方向（因为你阻止它所以不容易，因此检测用户的意图并不容易）
如果你知道用户的意图，你可以按代码，按固定数量的单位（例如px）滚动区域（正文或其他）

有没有办法在使用鼠标滚轮时使浏览器的滚动量保持一致？

1 个答案:

您需要：