0

I'd like to know exactly how many pixels the content will scroll before it actually scrolls and adjust based on circumstances.

$(window).on('wheel', function(e) {
    console.log(e);
});

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

How can I get the amount that will be scrolled in pixels and then scroll a different amount before the actual scroll happens?

rotaercz
  • 3,174
  • 7
  • 45
  • 80
  • do you mean a scrollable area inside the scrollable document's body? – Todd Dec 16 '14 at 00:05
  • Basically it's a div inside the body which holds all the content that I would like to control scroll. – rotaercz Dec 16 '14 at 01:01
  • check edited and demo. if not what you need, then should be as good a start as possible. Other than a scroll plugin. – Todd Dec 16 '14 at 05:09

2 Answers2

0

The scroll event fires after scrolling takes place so that's not possible.

Matijs
  • 3,088
  • 2
  • 24
  • 38
  • why not `$element.scroll()`? – Todd Dec 16 '14 at 00:55
  • That would trigger a scroll event. Not side if that is what @rotaercz wants. Personally I would not mess with things like scrolling. – Matijs Dec 16 '14 at 08:12
  • @Matjis agreed, not a fan of UX hijacking. Interested in the intellectual, problem-solving part of it only. You made a reasonable argument, definitely not downvote-worthy, but didn't offer any details. I wanted readers of this answer know that they could trigger programmatically, say after attaching evt handler: `$(el).scroll(function(e) { ... }).scroll();` I'm still not sure I understand what the OP wants... – Todd Dec 16 '14 at 08:24
0

to calculate this, here's what I use. Lets say we have an element that is 200px tall and has 1000px of content; $(el)[0].scrollHeight is the amount of scrollable content, $(element)[0].scrollTop is how much of the scrollable content has been scrolled and is above the element's "viewport".

How much it can be scrolled:

var scrollablePixels = $(element)[0].scrollHeight - $(element).scrollTop(); // 1000px

if it has been fully scrolled, the following will return true:

var hasScrolledToBottom = $(element)[0].scrollHeight - $(element).scrollTop() === $(element).height(); // false -- hasn't been scrolled yet

set the amount scrolled:

var pixelsToScrollElement = $(element).scrollTop(800);

now let's run the hasScrolledToBottom test again

$(element)[0].scrollHeight - $(element).scrollTop() === $(element).height(); // true

edit

An answer to another post will help: IN VIEWPORT?

basically you can use a combination of what I've listed and what's posted there to make your calculations

edit 3

DEMO

window.onmousewheel = document.onmousewheel = customScroll;

function customScroll(e) {
    var scrollTime = 1200,
        scrollDistance = 200,
        wheelChange = e.wheelDelta ? e.wheelDelta / 120 
                            : e.detail ? -e.detail / 3
                                       : 0,
        scrollTop = $(window).scrollTop() - scrollDistance * wheelChange;

    $('html, body').stop().animate({
        scrollTop: scrollTop
    }, scrollTime);

    e.preventDefault();
    e.returnValue = false;
}

$(window).on('DOMMouseScroll', function(e) {
    customScroll(e);
});
Community
  • 1
  • 1
Todd
  • 5,014
  • 3
  • 26
  • 45
  • I'm trying to obtain the amount that will scroll before it scrolls and modify the value. – rotaercz Dec 16 '14 at 01:38
  • do you mean "when it is in the viewport"? – Todd Dec 16 '14 at 01:43
  • Yes, when it's visible. – rotaercz Dec 16 '14 at 01:53
  • follow the link i included in my edit for this solution – Todd Dec 16 '14 at 02:03
  • I don't see how that link is relevant? I'm just trying to change the scroll amount when the scroll event happens. – rotaercz Dec 16 '14 at 02:16
  • ok onscroll, $('#myDiv').css('transform', 'translateY('+$(window).scrollTop() / scrollFactor 'px)'); – Todd Dec 16 '14 at 02:58
  • scrollFactor == how many times faster you want the window to scroll than your div – Todd Dec 16 '14 at 03:00
  • does that help? if so I'll change my answer. – Todd Dec 16 '14 at 03:01
  • Basically when a scroll happens, I'd like to hijack what would normally happen and change the amount it would scroll, etc. The usual scroll should not happen at all. From a user standpoint it should be seamless. – rotaercz Dec 16 '14 at 03:03
  • So apply that answer to a `positioned` wrapper div. $('#myWrapper').css('transform', 'translateY('+$(window).scrollTop() / scrollFactor 'px)'); – Todd Dec 16 '14 at 03:08
  • I don't see how your answer would work. I'd like to cancel out the previous scroll that would happen by default and then I may or may not move it an arbitrary amount. – rotaercz Dec 16 '14 at 03:12
  • lol. dude. It's like I'm getting more of your question every time I anwser "it" – Todd Dec 16 '14 at 04:27
  • Sorry, maybe I'm not very smart. Thanks for the thorough reply! – rotaercz Dec 16 '14 at 17:43
  • I chose your answer but what's the default pixel amount the browser would scroll on mousewheel usage? How can I allow the default to happen? – rotaercz Dec 16 '14 at 18:02