使用鼠标滚轮时，有没有办法使浏览器之间的滚动量保持一致？答案

【问题标题】：Is there a way to make the scroll amount consistent across browsers when using the mouse wheel?使用鼠标滚轮时，有没有办法使浏览器之间的滚动量保持一致？
【发布时间】：2016-12-06 21:54:49
【问题描述】：

我在 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);
    }
});

有没有办法控制使用鼠标滚轮时表格的滚动量以使其在浏览器之间保持一致？

【问题讨论】：

标签： javascript css

【解决方案1】：

是的，有一种方法，但并不那么容易，您需要发挥创造力。

您需要：

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

【讨论】：