4

我知道我们可以在 Windows 中通过控制面板-->鼠标-->滚轮-->减少/增加每个槽轮的行数。但是，如果我需要对我的网站做这件事怎么办。我想知道这种可能性。我们是否可以更改website鼠标滚轮的每个槽口滚动的行数，以便如果一个人打开我的网站，即使他的窗口设置保存为每个槽口 3 行，他在我的网站上体验每个槽口 1 行......如果比HOW有可能吗？？提前致谢..！！！♥</p>

编辑：问题的基线是平滑我的网站“不通过浏览器或操作系统中的自定义设置”的滚动，而是直接通过一些编码和东西从服务器端滚动。

4

3 回答 3

4

答案是：你不应该那样做。

您实际上要求的是一种无需任何许可即可由任何站点更改高度敏感的系统设置的方法。这似乎很荒谬。简单地想象每个网站都有它自己的“每个槽轮的行数”设置。听起来对任何人来说都是地狱。

顺便说一句，从可用性的角度来看，这确实是一种糟糕的方法。无论如何，正如您已经提到的，这可以在系统级别或浏览器级别完成。例如：

滚动时如何更改跳转行数？

对于您关于使用鼠标滚动的问题的第一部分。默认情况下，Firefox 将使用系统设置来决定使用鼠标滚轮时滚动多少行，但您可以通过修改几个隐藏的首选项来更改它。

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

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

你实际上可以做什么

当您并且只有您负责渲染时，您可以控制所有鼠标特定参数。这意味着使用 HTML Canvas，您可以做任何您想做的事情。

一些有用的例子：

于 2013-08-19T06:58:32.023 回答
1

您可以捕获 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>
于 2013-08-26T02:10:50.367 回答
-1

您可以捕获 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>

于 2013-08-26T02:08:01.370 回答