如何强制Chrome在固定的身高上向下滚动？

Question

由于Chrome / iPad的错误，我必须在html和body上放置固定的高度，但是我不能向下滚动（脚本很适合在Firefox中运行）：

$('span').on('click', function(e) {
    $('html, body').animate({
        scrollTop: 1200
    }, 1000);
});

/* iPad fix, has to stay! */
html, body{
    margin: 0;
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}
.content {
    height: 2000px;
    background: green;
}
span {
    color: yellow;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
    Some content... <span>click to scroll</span>
</div>

如何在webkit浏览器中使用而不更改样式？

我试图在滚动时移除固定高度，并在完成动画后将其放回去 - 但是页面滚动回到顶部！

JSFiddle上的游乐场。

Answer 1

要修复此溢出滚动问题，我们可以使用scrollIntoView()方法。我做的很简单：

$(elementToScrollTo)[0].scrollIntoView({block: "start", behavior: "smooth"});

虽然Firefox仅支持scrollIntoViewOptions，但该方法适用于所有浏览器。