gpt4 book ai didi

javascript - 使用鼠标滚轮时,有没有办法使滚动量在浏览器之间保持一致?

转载 作者:行者123 更新时间:2023-12-03 08:28:42 25 4
gpt4 key购买 nike

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

有没有一种方法可以控制使用鼠标滚轮时表格滚动的程度,以使其在浏览器之间保持一致?

最佳答案

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

您将需要:

  1. 监听触发滚动的任何事件(鼠标滚轮、向上翻页、向下翻页、键盘箭头......)

  2. 阻止事件实际滚动内容

  3. 确定滚动方向(这并不容易,因为你阻止了它,所以检测用户的意图并不那么容易)

  4. 如果您知道用户的意图,您可以通过代码以固定数量的单位(例如 px)滚动区域(正文或其他内容)

关于javascript - 使用鼠标滚轮时,有没有办法使滚动量在浏览器之间保持一致?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32747332/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com