17

I have this event:

$(window).scroll(function(e){    
    console.log(e);
})

I want to know, how much I have scroll value in pixels, because I think, scroll value depends from window size and screen resolution.

Function parameter e does not contains this information.
I can store $(window).scrollTop() after every scroll and calculate difference, but can I do it differently?

8
  • 4
    $(window).scrollTop(); Commented Nov 18, 2014 at 9:43
  • Jonas Grumann, yes, but it all offset, i needs scroll value, how many pizels where scrolled on current event Commented Nov 18, 2014 at 9:48
  • 1
    Stackoverflow Commented Nov 18, 2014 at 9:49
  • not scroll count, scroll value in pixels Commented Nov 18, 2014 at 10:05
  • Check this out. You can modify it as per your needs. Commented Feb 24, 2015 at 8:13

4 Answers 4

23
+50

The "scroll value" does not depend on the window size or screen resolution. The "scroll value" is simply the number of pixels scrolled.

However, whether you are able to scroll at all, and the amount you can scroll is based on available real estate for the container and the dimensions of the content within the container (in this case the container is document.documentElement, or document.body for older browsers).

You are correct that the scroll event does not contain this information. It does not provide a delta property to indicate the number of pixels scrolled. This is true for the native scroll event and the jQuery scroll event. This seems like it would be a useful feature to have, similar to how mousewheel events provide properties for X and Y delta.

I do not know, and will not speculate upon, why the powers-that-be did not provide a delta property for scroll, but that is out of scope for this question (feel free to post a separate question about this).

The method you are using of storing scrollTop in a variable and comparing it to the current scrollTop is the best (and only) method I have found. However, you can simplify this a bit by extending jQuery to provide a new custom event, per this article: http://learn.jquery.com/events/event-extensions/

Here is an example extension I created that works with window / document scrolling. It is a custom event called scrolldelta that automatically tracks the X and Y delta (as scrollLeftDelta and scrollTopDelta, respectively). I have not tried it with other elements; leaving this as exercise for the reader. This works in currrent versions of Chrome and Firefox. It uses the trick for getting the sum of document.documentElement.scrollTop and document.body.scrollTop to handle the bug where Chrome updates body.scrollTop instead of documentElement.scrollTop (IE and FF update documentElement.scrollTop; see https://code.google.com/p/chromium/issues/detail?id=2891).

JSFiddle demo: http://jsfiddle.net/tew9zxc1/

Runnable Snippet (scroll down and click Run code snippet):

// custom 'scrolldelta' event extends 'scroll' event
jQuery.event.special.scrolldelta = {
    delegateType: "scroll",
    bindType: "scroll",
    handle: function (event) {
        var handleObj = event.handleObj;
        var targetData = jQuery.data(event.target);
        var ret = null;
        var elem = event.target;
        var isDoc = elem === document;
        var oldTop = targetData.top || 0;
        var oldLeft = targetData.left || 0;
        targetData.top = isDoc ? elem.documentElement.scrollTop + elem.body.scrollTop : elem.scrollTop;
        targetData.left = isDoc ? elem.documentElement.scrollLeft + elem.body.scrollLeft : elem.scrollLeft;
        event.scrollTopDelta = targetData.top - oldTop;
        event.scrollTop = targetData.top;
        event.scrollLeftDelta = targetData.left - oldLeft;
        event.scrollLeft = targetData.left;
        event.type = handleObj.origType;
        ret = handleObj.handler.apply(this, arguments);
        event.type = handleObj.type;
        return ret;
    }
};

// bind to custom 'scrolldelta' event
$(window).on('scrolldelta', function (e) {
    var top = e.scrollTop;
    var topDelta = e.scrollTopDelta;
    var left = e.scrollLeft;
    var leftDelta = e.scrollLeftDelta;
  // do stuff with the above info; for now just display it to user
    var feedbackText = 'scrollTop: ' + top.toString() + 'px (' + (topDelta >= 0 ? '+' : '') + topDelta.toString() + 'px), scrollLeft: ' + left.toString() + 'px (' + (leftDelta >= 0 ? '+' : '') + leftDelta.toString() + 'px)';
    document.getElementById('feedback').innerHTML = feedbackText;
});
#content {
    /* make window tall enough for vertical scroll */
    height: 2000px;
    /* make window wide enough for horizontal scroll */
    width: 2000px;
    /* visualization of scrollable content */
    background-color: blue;
}
#feedback {
    border:2px solid red;
    padding: 4px;
    color: black;
    position: fixed;
    top: 0;
    height: 20px;
    background-color: #fff;
    font-family:'Segoe UI', 'Arial';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='feedback'>scrollTop: 0px, scrollLeft: 0px</div>
<div id='content'></div>

Note that you may want debounce the event depending on what you are doing. You didn't provide very much context in your question, but if you give a better example of what you are actually using this info for we can provide a better answer. (Please show more of your code, and how you are using the "scroll value").

2
  • This code is now hosted on GitHub Commented Sep 12, 2015 at 21:52
  • The delta is not provided probably because the interval is unknown and thus sometimes a bit irrelevant. They would then have to provide the time from when this was recorded for you to be able to calculate some kind of scrolling speed, for example. Also this delta value would be strange to use when throttling ...
    – user3638471
    Commented Nov 9, 2017 at 0:38
7

To detemine how many pixels were scrolled you have to keep in mind that the scroll event gets fired almost every pixel that you move. The way to accomplish it is to save the previous scrolled value and compare that in a timeout. Like this:

var scrollValue = 0;
var scrollTimeout = false

$(window).scroll(function(event){
    /* Clear it so the function only triggers when scroll events have stopped firing*/
    clearTimeout(scrollTimeout);
    /* Set it so it fires after a second, but gets cleared after a new triggered event*/
    scrollTimeout = setTimeout(function(){
        var scrolled = $(document).scrollTop() - scrollValue;
        scrollValue = $(document).scrollTop();
        alert("The value scrolled was " + scrolled);
    }, 1000);
});

This way you will get the amount of scrolled a second after scrolling (this is adjustable but you have to keep in mind that the smooth scrolling that is so prevalent today has some run-out time and you dont want to trigger before a full stop).

11
  • You dont really need the timeout. How does that make any difference? Commented Feb 24, 2015 at 7:26
  • 5
    It lowers the amount of resources used and only calls your function when scrolling has ended. This is mostly because modern browsers keep scrolling a little bit more as it feels natural. Calling a jQuery function on a couple of hundred events every second is a bit... excessive. Commented Feb 24, 2015 at 7:36
  • 1
    Oh sorry (I just woke up when I replied to you), but the main reason is that if you don't call it on a timeout, your scroll difference would always be 1 as you'd reset the scrollValue every time the event fires, meaning you would never know how much was actually scrolled in total, which was what the question was about :). (Thanks for the +1, I'm replying now just to be clear) Commented Feb 24, 2015 at 10:05
  • There are ways to scroll the content besides mouse & touch, like the keyboard (page up, page down, arrow keys up & down, home, end) that will result in >1px jumps of the scrollTop value. This may depend on the browser & OS (in my tests when using the End key in Firefox it fires multiple onscroll events, versus Chrome only firing one). Commented Mar 1, 2015 at 15:03
  • 1
    Question was lacking useful details, but OP stated they already knew how to get the delta using the exact method that you showed in your answer (minus the debouncing which is what we call it when you use setTimeout to throttle back the event like you did). OP's question was "can i do it differently?" and mentioned the event didn't have amount scrolled. OP didn't say anything about needing to debounce, and because OP didn't specify the use case we don't know if it is necessary. For the record, I upvoted you first, but wanted to try my hand at a custom jQ event that provided the scroll data. Commented Mar 3, 2015 at 16:00
2

The other way to do this? Yes, possible, with jQuery Mobile
I do not appreciate this solution, because it is necessary to include heavy jQuery mobile. Solution:

var diff, top = 0;
$(document).on("scrollstart",function () {
  // event fired when scrolling is started
  top = $(window).scrollTop();
});
$(document).on("scrollstop",function () {
  // event fired when scrolling is stopped
  diff = Math.abs($(window).scrollTop() - top);
});
14
  • I want, get value in pixels, when scroll event fired Commented Feb 24, 2015 at 7:33
  • add px string and you will get it in pixels, whats the problem? Commented Feb 24, 2015 at 7:35
  • window has not scrollHeight property Commented Feb 24, 2015 at 7:42
  • @zazu I dont see this to be more efficient that the most obvious solution that OP already stated in the question. You are making calls to 3 different functions in jQuery as opposed to 2 (which are the same functions) in the obvious one. Commented Feb 24, 2015 at 7:42
  • @RahulDesai if scroll direction is different (scrolled to top for example), will it work? Commented Feb 24, 2015 at 7:43
1

To reduce the used processing power by adding a timer to a Jquery scroll method is probably not a great idea. The visual effect is indeed quite bad.

The whole web browsing experience could be made much better by hiding the scrolling element just when the scroll begins and making it slide in (at the right position) some time after. The scrolling even can be checked with a delay too. This solution works great.

$(document).ready(function() {

    var element = $('.movable_div'),
    originalY = element.offset().top;
    element.css('position', 'relative');

    $(window).on('scroll', function(event) {
        var scrollTop = $(window).scrollTop();
        element.hide();
        element.stop(false, false).animate({
            top: scrollTop < originalY
                    ? 0
                    : scrollTop - originalY + 35
        }, 2000,function(){element.slideDown(500,"swing");});
    });
});

Live demo here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.