javascript - 在 CSS 上禁用滚动时使用 jQuery 滚动

Question

我想使用 jQuery 动画滚动页面，但滚动在 CSS 中被禁用，它不允许动画发生：

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


$('html, body').animate({
    scrollTop: 939
}, 2500);

这是小提琴：http: //jsfiddle.net/AKPHB/1/

Answer 1

如果设置溢出：隐藏，滚动事件不会发生。所以你也不能使用动画来触发它。真的，如果用户无论如何都不能滚动，那么动画滚动有什么意义：p

一种解决方案是将内容包装在另一个容器中并为容器设置动画，如下所示：

演示：http: //jsfiddle.net/AKPHB/10/

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

CSS：

#content{position:relative}

和 Javascript：

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

Answer 2

我可以建议margin-top改用。对用户的效果是一样的，因为没有滚动条：

演示

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