html 减少网站上鼠标每个滚轮凹槽的行数

nkoocmlb  于 2023-08-01  发布在  其他
关注(0)|答案(5)|浏览(100)

我知道我们可以在windows中通过控制面板-->鼠标-->滚轮-->减少/增加每个凹槽滚轮的行数来实现。但是如果我需要对我的网站做这件事呢?我想知道这种可能性。我们可以改变滚动在一个**website**每凹口的鼠标滚轮,以便如果一个人打开我的网站,即使他的窗口设置保存到3行每凹口,他的经验1行每凹口在我的网站上的行数。.如果它是可能的比如何??提前感谢..!!!♥
编辑:这个问题的底线是平滑我的网站的滚动“不是通过浏览器或操作系统中的自定义设置”,而是直接从服务器端通过一些编码和东西。

vxqlmq5t

vxqlmq5t1#

**答案是:你不该这么做

你实际上要求的是一种在没有任何许可的情况下通过任何网站更改高度敏感的系统设置的方法。这似乎很荒谬。简单地想象一下,每个网站都有自己的“每个凹槽轮的行数”设置。听起来对任何人来说都像地狱。
顺便说一句,从可用性的Angular 来看,这是一个非常糟糕的方法。无论如何,正如你已经提到的,这可以在系统级或浏览器级完成。举例来说:
How can i change the number of jumped lines when scrolling?
对于你的问题的第一部分,关于用鼠标滚动。默认情况下,Firefox将使用系统设置来决定使用鼠标滚轮时滚动多少行,但您可以通过修改几个隐藏的首选项来更改它。

  • 在地址栏中键入about:config并按Enter键
  • 接受出现的警告消息,将出现首选项列表
  • 在过滤器框中输入numlines
  • 双击首选项mousewheel.withnokey.sysnumlines将其值更改为false
  • 双击首选项mousewheel.withnokey.numlines并将其更改为您希望滚动的行数

任何具有从外部静默更改系统设置选项的浏览器都将被简单地删除。

你真正能做的

当您且仅由您负责渲染时,可以控制所有鼠标特定参数。这意味着使用HTML Canvas,您可以做任何您想要做的事情。
一些有用的例子:

a5g8bdjr

a5g8bdjr2#

您可以捕获OnMouseWheel事件,手动滚动窗口并阻止默认处理:

<html>

<head>

<script>

var MOUSE_WHEEL_GAIN = 1;

function OnMouseWheel() {

  window.scrollTo(0, document.body.scrollTop - event.wheelDelta/120 * MOUSE_WHEEL_GAIN);

  var e = window.event;
  e.returnValue = false;
  e.cancelBubble = true;
  return false;

}

</script>

<head>

<body ONMOUSEWHEEL="OnMouseWheel()">

<script>
for (i=0;i<20;i++) document.write("<p>" + i + " Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>");
</script>

</body>

</html>

字符串

rn0zuynd

rn0zuynd3#

你可以用一行CSS来实现这一点:

html {
  scroll-behavior: smooth;
}

字符串
这将降低用户在您的网站中滚动的速度。

mzmfm0qo

mzmfm0qo4#

好吧,我明白你在问什么。我在某个地方找到了一篇文章解决了这个问题,这不是一个糟糕的UX,因为它不会影响网站的UX。
问题是,在Chrome中,当您打开Google Sheet并滚动(垂直或水平)时,工作表一次滚动3列/行。在Firefox中,它一次滚动6列/行。我在我的台式机上修复了它,但不记得在我的笔记本电脑上更改此设置。
它基于Firefox设置,而不是UX设计。别再说了。
我会在找到正确的Firefox设置后再次发布。

  • 更新 *

我实际上是在这篇评论之后找到这篇文章的,这是Firefox 91发布后的一个Firefox问题。
将“mousewheel.system_scroll_override.enabled”设置更改为“false”
全文在这里
https://bugzilla.redhat.com/show_bug.cgi?id=2001807

kq4fsx7k

kq4fsx7k5#

您可以捕获OnMouseWheel事件并重新计算整个页面或某些元素的布局:

<html>

<head>

<script>

var count = 1;

function OnMouseWheel() {

  count += event.wheelDelta/120;
  img1.style.top = count * 5;
  img2.style.top = count * 10;
  img3.style.top = count * 20;

}

</script>

<head>

<body ONMOUSEWHEEL="OnMouseWheel()">

<img ID="img1" style="position:relative" src="http://upload.wikimedia.org/wikipedia/commons/a/aa/3-Tastenmaus_Microsoft.jpg" width="400" height="350">
<img ID="img2" style="position:relative" src="http://upload.wikimedia.org/wikipedia/commons/a/aa/3-Tastenmaus_Microsoft.jpg" width="400" height="350">
<img ID="img3" style="position:relative" src="http://upload.wikimedia.org/wikipedia/commons/a/aa/3-Tastenmaus_Microsoft.jpg" width="400" height="350">

</body>

</html>

字符串

相关问题