Decrease number of lines per wheel notch of mouse on website

Question

I know we can do it in windows through control-panel-->mouse-->wheel-->decrease/increase number of lines per notch wheel. But what if I need to do that thing with my website. I wanted to know the possibility. Can we CHANGE the number of lines scrolled in a website per notch of the mouse wheel so that if a person opens my website even if his windows setting is saved to 3 lines per notch, he experiences 1 line per notch on my website..And if it is possible than HOW?? Thanks in Advance..!!! ♥

Edit:The base line of the question is to smoothen the scrolling of my website "NOT THROUGH CUSTOMISING SETTINGS IN BROWSER OR OS" but from server side directly through some coding and stuff..

I just stumbled upon this question and wanted to say I agree with @Renat Gilmanov that *YOU SHOULD NOT BE DOING THIS*. Web sites messing with how scrolling works is *incredibly infuriating* to users. If I go a web site and find that it interferes with scrolling to make a click of my wheel only move 1 line instead of 3, I immediately close that tab. It is horrible UX. — Sohcahtoa82, Aug 31 '17 at 18:03

score 4 · Answer 1 · edited May 23 '17 at 12:14

The answer is: you shouldn't do that.

What you are actually asking for is a way to change highly sensitive system settings by any site without any permission. Which seems to be ridiculous. Simply try to imagine every web-site has it's own "number of lines per notch wheel" setting. Sounds like a hell for anybody.

BTW, this is really bad approach from usability point of view. Anyway, as you have already mentioned this can be done on system level or browser level. For example:

How can i change the number of jumped lines when scrolling?

For the first part of your question concerning scrolling with the mouse. By default Firefox will uses system settings for deciding how many lines to scroll when using the mouse wheel, but you can change it by modifying a couple of hidden preferences.

Type about:config into the location bar and press enter

Accept the warning message that appears and a list of preferences will appear

In the filter box type numlines

Double-click on the preference mousewheel.withnokey.sysnumlines to change its value to false

Double-click on the preference mousewheel.withnokey.numlines and change it to the number of lines you want to scroll

Any browser with the option to silently change a system setting from the outside will be simply dropped.

What you can actually do

You can control all mouse specific parameters when you and only you are responsible for the rendering. Which means with HTML Canvas you can do everything you want.

Some useful examples:

I agree with your view about it. But the base line of the question was to smoothen the scrolling of my website "NOT THROUGH CUSTOMISING SETTINGS IN BROWSER OR OS" but from server side directly. — XeeMez AsHu, Aug 19 '13 at 08:07
I see, but how can you decide on behalf of the user? Scrolling smoothness depends on many parameters, so let's imagine user has smooth and stable scrolling. Will you be able to detect that? The answer is no. If you really want to have that control - use HTMLCanvas. — Renat Gilmanov, Aug 19 '13 at 08:42

score 1 · Accepted Answer · answered Aug 26 '13 at 02:10

You can catch OnMouseWheel events, manually scroll the window and prevent default handling:

<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>

Bonus: change minus sign for a plus sign for an awesome Mac OS X natural scroll effect. — rjobidon, Aug 26 '13 at 02:12
Not working on IE. Just so you know becouse I have already incorporated browser based coding for that.so it's all good.peace..☺☻♥ — XeeMez AsHu, Aug 26 '13 at 09:16

score -1 · Answer 3 · answered Aug 26 '13 at 02:08

You can catch OnMouseWheel events and recalculate the layout of your whole page or some elements:

<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>

Decrease number of lines per wheel notch of mouse on website

3 Answers3