Animating body scrollTop in PhantomJS doesn't change scrollTop value

Question

As part of a component test I'm trying to verify an element is scrolled in PhantomJS. While the scroll code works fine in our app, the scrollTop of the element never changes when run in Phantom.

For the test, I ensure the body has a max-height, just in case.

$body = $('body').css({
    'max-height': '1000px',
    overflow: 'scroll'
});

Then I add some elements which extend further than the body.

$body.append(
    '<div style="height: 2000px;"></div>' +
    '<div style="height: 2000px;"></div>' +
    '<div style="height: 2000px;" data-uid="1"></div>');

Then I animate the scrollTop, given the third div as $element (so the offset().top == 4000).

$body.animate({
    scrollTop: $element.offset().top
}, 150, function() {
    // $body.scrollTop() is still 0
});

Yet after the animation has finished, the body isn't reporting any new scrollTop.

I've been unable to find documentation or other examples that explain this issue.

Answer 1

Have You tried setting viewportSize of the page? I'd guess that if the size is not set, the whole page gets rendered so that there is no need for scrolling (whole page is visible in the viewport).

Here is the description of that property