Menu
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.
689
Solution #1: Disable "Fixed Popup" Setting To make sure your popup scrolls properly, you can first disable the Fixed Positioning setting. In the Popup Editor, go to Popup Settings > Display > Position. Uncheck the Fixed Positioning option.
If you want to check whether the user has scrolled to the bottom of the page, you can use the scroll() jQuery event. The given code piece takes the top scroll of the window, so how much the page is scrolled down, it adds the height of the visible window and checks if it is equivalent to the height of the document.
type == 'mouseenter') { if( ... if scrollbar visible ? ... ) { alert('true'): } else { alert('false'): } } });
EDIT: The previous version of this answer was for the
mousewheelevent that is non-standard/deprecated. Use thewheelevent instead. Notice that in this case, the value ofdeltaYis opposite to the one ofwheelDeltaYso 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/
84
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
