Jquery/Js:Detect User's Scroll Attempt Without Any Window Overflow to Scroll To

JQuery / JS : Detect user's scroll attempt without any window overflow to scroll to

Have a look at this question. I used it as a reference to make this fiddle.

Works only in Firefox:

$('html').on ('DOMMouseScroll', function (e) {
    var delta = e.originalEvent.detail;

    if (delta < 0) {
        $('p').text ('You scrolled up');
    } else if (delta > 0) {
        $('p').text ('You scrolled down');
    }

});

Works in Chrome, IE, Opera and Safari:

$('html').on ('mousewheel', function (e) {
    var delta = e.originalEvent.wheelDelta;

    if (delta < 0) {
        $('p').text ('You scrolled down');
    } else if (delta > 0) {
        $('p').text ('You scrolled up');
    }
});

You'd have to bind it on an element that spans your entire browser screen.

Detect scrolling attempts in overflow:hidden page?

Try using jQuery mousewheel https://github.com/brandonaaron/jquery-mousewheel. You can detect the mousewheel movement. The other option is to not set the overflow to hidden but instead catch the scroll attempt and scroll them yourself. There are also a bunch of libraries for JS scrolling, I like http://manos.malihu.gr/jquery-custom-content-scroller/.

Check if a user has scrolled to the bottom (not just the window, but any element)

Use the .scroll() event on window, like this:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

You can test it here, this takes the top scroll of the window, so how much it's scrolled down, adds the height of the visible window and checks if that equals the height of the overall content (document). If you wanted to instead check if the user is near the bottom, it'd look something like this:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("near bottom!");
   }
});

You can test that version here, just adjust that 100 to whatever pixel from the bottom you want to trigger on.

jQuery scroll() detect when user stops scrolling

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        // do something
        console.log("Haven't scrolled in 250ms!");
    }, 250));
});

Update

I wrote an extension to enhance jQuery's default on-event-handler. It attaches an event handler function for one or more events to the selected elements and calls the handler function if the event was not triggered for a given interval. This is useful if you want to fire a callback only after a delay, like the resize event, or such.

It is important to check the github-repo for updates!

https://github.com/yckart/jquery.unevent.js

;(function ($) {
    var on = $.fn.on, timer;
    $.fn.on = function () {
        var args = Array.apply(null, arguments);
        var last = args[args.length - 1];

        if (isNaN(last) || (last === 1 && args.pop())) return on.apply(this, args);

        var delay = args.pop();
        var fn = args.pop();

        args.push(function () {
            var self = this, params = arguments;
            clearTimeout(timer);
            timer = setTimeout(function () {
                fn.apply(self, params);
            }, delay);
        });

        return on.apply(this, args);
    };
}(this.jQuery || this.Zepto));

Use it like any other on or bind-event handler, except that you can pass an extra parameter as a last:

$(window).on('scroll', function(e) {
    console.log(e.type + '-event was 250ms not triggered');
}, 250);

http://yckart.github.com/jquery.unevent.js/

(this demo uses resize instead of scroll, but who cares?!)

jQuery or Javascript - how to disable window scroll without overflow:hidden;

Try to handler 'mousewheel' event on all nodes except one

$('body').on({
    'mousewheel': function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();
    }
})

Demo: http://jsfiddle.net/DHz77/1/

Detect scrolling on pages without a scroll bar

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>

Detect if user is scrolling

this works:

window.onscroll = function (e) {  
// called when the window is scrolled.  
} 

edit:

you said this is a function in a TimeInterval..

Try doing it like so:

userHasScrolled = false;
window.onscroll = function (e)
{
    userHasScrolled = true;
}

then inside your Interval insert this:

if(userHasScrolled)
{
//do your code here
userHasScrolled = false;
}

---

Related Topics