Уменьшите количество линий на колесико мыши на сайте

Я знаю, что мы можем сделать это в windows через панель управления->мышь - >колесо - >уменьшить/увеличить количество линий на одно колесо надреза. Но что, если мне нужно сделать это с моим сайтом? Я хотел знать, есть ли такая возможность. Можем ли мы изменить количество строк, прокрученных в a website таким образом, если человек открывает мой веб-сайт, даже если его настройки windows сохранены до 3 строк на каждую отметку, он получает 1 строку на каждую отметку на моем веб-сайте..И если это возможно, чем, как?? Спасибо заранее..!!! ♥

Edit: основная линия вопроса состоит в том, чтобы сгладить прокрутку моего сайта "не через настройку настроек в браузере или ОС", а со стороны сервера непосредственно через некоторое кодирование и прочее..

3 3
scroll webpage mousewheel

3 ответа:

Вы можете перехватывать события 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>
1

Ответ таков: вы не должны этого делать.

То, что вы на самом деле просите, - это способ изменения высокочувствительных системных настроек любым сайтом без какого-либо разрешения. Что кажется мне нелепым. Просто попробуйте представить себе, что каждый веб-сайт имеет свою собственную настройку "количество строк на зубчатое колесо". Звучит как ад для любого.

Кстати, это действительно плохой подход с точки зрения удобства использования. В любом случае, как вы уже упомянули, это можно сделать на системном уровне или в браузере уровень. Например:

Как я могу изменить количество перескочивших строк при прокрутке?

Для первой части вашего вопроса, касающегося прокрутки с помощью мышь. По умолчанию Firefox будет использовать системные настройки для принятия решения о том, как много линий для прокрутки при использовании колеса мыши, но вы можете изменить его изменив пару скрытых предпочтений.

  • введите about: config в строку расположения и нажмите enter
  • примите предупреждение. появится сообщение, и появится список предпочтений
  • в поле фильтра введите numlines
  • дважды щелкните на колесе мыши предпочтения.withnokey.sysnumlines изменить его значение на false
  • дважды щелкните на колесе мыши предпочтения.withnokey.numlines и измените его на количество строк, которые вы хотите прокрутить

Любой браузер с возможностью молча изменять системные настройки извне будет просто упал.

Что вы действительно можете сделать

Вы можете управлять всеми конкретными параметрами мыши, когда вы и только вы отвечаете за рендеринг. Это означает, что с HTML Canvas вы можете делать все, что хотите.

Некоторые полезные примеры:

4

Вы можете перехватить события 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>

-1