Tuesday, October 15, 2013

Scrolling with jQuery when scrolling is disabled on CSS

I would like to scroll the page using a jQuery animation yet the scrolling is disabled in the CSS & it doesn’t allow the animation to take place:

$('html, body').css({    'overflow': 'hidden',    'height': '100%'});$('html, body').animate({    scrollTop: 939}, 2500);

Here’s the fiddle: http://jsfiddle.net/AKPHB/1/

If you set overflow:hidden, the scroll event doesn’t happen. So you can’t trigger it using the animation either. And really, what’s the point of animating a scroll if the user can’t scroll anyway :p

One solution is to wrap the content in another container & animate the container instead, like this:

Demo: http://jsfiddle.net/AKPHB/10/

<div id="content">    <div class="text">text</div>    <div class="text">text</div></div>

CSS:

#content{position:relative}

And the Javascript:

$('#content').animate({ top: -939 });

No comments:

Post a Comment