4

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

Ashish Sharma
  • 332
  • 7
  • 32
  • 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

5 Answers5

4

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:

Community
  • 1
  • 1
Renat Gilmanov
  • 17,735
  • 5
  • 39
  • 56
  • 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. – Ashish Sharma Aug 19 '13 at 08:07
  • 2
    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
1

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>
rjobidon
  • 3,055
  • 3
  • 30
  • 36
0

You can achieve this with one line of CSS:

html {
  scroll-behavior: smooth;
}

This will reduce the speed at which a user can scroll through your site.

curran
  • 1
  • 1
0

Ok, I understand what's being asked here. I found an article somewhere that SOLVES this issue, and it's NOT bad UX, because it doesn't affect the UX of websites.

What the issue is is that in Chrome, when you have a Google Sheet open and scroll (vertically or horizontally), the sheet scrolls 3 columns/rows at a time. In Firefox, it scrolls 6 columns/rows at a time. I fixed it on my desktop, but can't remember the setting to change to do this on my laptop.

It's based on Firefox settings, not UX design. Please stop saying this.

I will post it once I find the correct Firefox setting again.

UPDATE

I actually found the article right after this comment, it was a Firefox issue after Firefox 91 release.

Change the "mousewheel.system_scroll_override.enabled" setting to "false"

Full article here

https://bugzilla.redhat.com/show_bug.cgi?id=2001807

Daniel Combs
  • 1
  • 1
-1

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>

rjobidon
  • 3,055
  • 3
  • 30
  • 36