Scrolling with jQuery when scrolling is disabled on CSS

Question

I would like to scroll the page using a jQuery animation but the scrolling is disabled in the CSS and 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/

It works everywhere except webkit-based browsers. Sure it's not an answer, just interesting note. — Tommi
– Tommi, Commented Jul 9, 2013 at 9:36
I tried in Opera 12.16; IE10 in 10 && 9 mode, latest FF, Chrome and Safari (Windows). It doesn't work in Chrome and Safari (both webkit-based) — Tommi
– Tommi, Commented Jul 9, 2013 at 9:42

David Hellsing · Accepted Answer · 2013-07-09 09:58:00Z

3

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 and 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 });

edited Jul 9, 2013 at 9:58

answered Jul 9, 2013 at 9:48

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alvaro Over a year ago

Interesting to see that you used the property top instead of scrollTop for the animation. I was trying it with a container also but it seems it doesn't work with scrollTop. Thanks!

David Hellsing Over a year ago

@alvaro there’s no magic there. The scroll is disabled and so is the "scrollTop" animation property since it triggers the scroll itself.

mishik · Accepted Answer · 2013-07-09 09:37:02Z

0

I can suggest using margin-top instead. The effect to the user will be the same, since there's no scrollbar:

Demo

$('html, body').animate({
    "margin-top": -100,
    "height": "+=200"     // Fix height to show additional content   
}, 2500);

answered Jul 9, 2013 at 9:37

mishik

10k9 gold badges48 silver badges69 bronze badges

2 Comments

Alvaro Over a year ago

It seems more kind of a trick than a proper way to do it. Also, is not that smooth compare with the desired result: jsfiddle.net/AKPHB/4

Alvaro Over a year ago

Im sure there should be a way. Just look at this site with overflow hidden in its body: onlinedepartment.nl/about-us/#designprinciples

Collectives™ on Stack Overflow

Scrolling with jQuery when scrolling is disabled on CSS

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related