gpt4 book ai didi

html - 如何更改 HTML 页面上的键盘滚动步骤

转载 作者:太空宇宙 更新时间:2023-11-04 11:41:38 24 4
gpt4 key购买 nike

我正在实现一个用于查看日志条目的网页。代码如下所示(带有随机数据):

<html>

<body>
<div style="width: 100%; height: 150px; overflow-y: scroll; overflow-x: hidden; white-space: nowrap;">
<ul>
<li>1: Random: 199737: RANDOM: thou cover bare unless mind office library</li>
<li>2: Random: 199738: RANDOM: quietly syllable fewer which selection dangerous</li>
<li>3: Random: 199739: RANDOM: hung spend wonder care (199739) leg card first</li>
<li>4: Random: 199740: RANDOM: available circus laid (199740) surrounded pack</li>
<li>5: Random: 199741: RANDOM: finally green be around (199741) visit headed</li>
<li>6: Random: 199742: RANDOM: studied until bare parts busy string modern</li>
<li>7: Random: 199743: RANDOM: empty garage sitting (199743) fish famous still</li>
<li>8: Random: 199744: RANDOM: cat kitchen service diameter friendly lying</li>
<li>9: Random: 199745: RANDOM: even shoulder composition rubber carbon</li>
<li>10: Random: 199746: RANDOM: about indicate rhythm were beneath expression bit</li>
<li>11: Random: 199747: RANDOM: future independent clock lying reach slipped</li>
<li>12: Random: 199748: RANDOM: clothing number scared solar radio forty</li>
<li>13: Random: 199749: RANDOM: break volume folks teach</li>
</ul>
</div>
</body>

</html>

现在,如果我单击列表并按 DOWN每按一个键,列表就会滚动一行以上。在 Chrome 中,我看到第一行,然后是第三行,然后是第六行,等等......

我的期望是 UPDOWN键应该正好滚动1行,而PAGE UPPAGE DOWN应该精确滚动适合 <div> 的行数(当前示例中为 150px)。然而,这种情况并非如此。相反,UP , DOWN键滚动 2 行和 PAGE UP , PAGE DOWN滚动大约 75% 的可见区域。

我的问题是为什么会这样,有没有办法以预期的方式做到这一点?

最佳答案

您可以添加一个使用 javascript 更改滚动值的文档监听器

var pageUp   = 33;
var pageDown = 34;
var keyUp = 38;
var keyDown = 40;

$(document).keydown(function(e) {
var key = e.which;
//console.log(key);
if(key==keyDown) {
// scroll down height of one entry
e.preventDefault();
} else if (key==pageDown) {
// scroll different
e.preventDefault();
.
.
});

来源:How do I prevent scrolling with arrow keys but NOT the mouse?

关于html - 如何更改 HTML 页面上的键盘滚动步骤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31297926/

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