Search code examples
scrollmousehtmlmousewheel

Decrease number of lines per wheel notch of mouse on website

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

Solution

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