Detect scrolling on pages without a scroll bar

Question

I have a webpage where the body has css

body {
  overflow-x: hidden;
  overflow-y: hidden;
}

I do not want to show the scroll bar.

I want to run some javascript when the user scrolls down, so I did this:

<script>
document.addEventListener("scroll", function (e) {
    console.log("scrolling engage");
    if (e.detail > 0) {
        // do things ...
    }
    return false;
}, true);
</script>

I also tried setting onscroll to the function. The problem is that this event does not fire, I then found this page which says the event only fires when there is a scroll bar, however I don't want a scroll bar.

How do I detect the scroll wheel without showing the scroll bar? I do not want to use jQuery.

Have a look at this question: http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll — roemel, Jun 17 '15 at 13:20
I know you don't want to use jQuery, but a good place to start figuring out how to do it is to look at the [jQuery mousewheel source](https://github.com/jquery/jquery-mousewheel/blob/master/jquery.mousewheel.js) which will contain all manner of plain javascript solutions to detecting crossbrowser mousewheel events. — gfullam, Jun 17 '15 at 13:24
@AlvaroMontoro Yes, I want to detect the scroll wheel on the mouse. — Alice Ryhl, Jun 17 '15 at 13:33

Alvaro Montoro · Accepted Answer · 2015-06-17T14:06:50.763

EDIT: The previous version of this answer was for the mousewheel event that is non-standard/deprecated. Use the wheel event instead. Notice that in this case, the value of deltaY is opposite to the one of wheelDeltaY so instead of adding, you'll substract.

You can use the wheel event. Once that event is called, it has the Delta values that will show you how many pixels the mousewheel scrolled. Although you'll be interested only in the deltaY one.

Now, once you have the vertical change, you just need to update the translation of the body by updating the value of transform:translateY and substracting the e.deltaY value to it. Something like this:

document.addEventListener("wheel", function (e) {

    // get the old value of the translation (there has to be an easier way than this)
    var oldVal = parseInt(document.getElementById("body").style.transform.replace("translateY(","").replace("px)",""));

    // to make it work on IE or Chrome
    var variation = parseInt(e.deltaY);
    
    // update the body translation to simulate a scroll
    document.getElementById("body").style.transform = "translateY(" + (oldVal - variation) + "px)";

    return false;
    
}, true);

body {
    overflow-y:hidden;
    overflow-x:hidden;
}

<body id="body" style="transform:translateY(0px)">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
  <p>12</p>
  <p>13</p>
  <p>14</p>
  <p>15</p>
  <p>16</p>
  <p>17</p>
  <p>18</p>
  <p>19</p>
  <p>20</p>
</body>

It is difficult to see the effect on that window, You can see it better on this JSFiddle: http://jsfiddle.net/pLb93eeL/4/

A small note I'd like to add for Qt developers is that Qt5 uses a WebKit that works with `mousewheel` event and `wheelDeltaY` property. I then was able to make a horizontal scroller react to `wheelDeltaY`. This answer helped me, however. — Volomike, Nov 12 '15 at 19:30
Wheel event wont work in mobile or in any touch screen, how to do it there — Ankit, Nov 27 '19 at 18:47

Detect scrolling on pages without a scroll bar

1 Answers1