javascript - 如何强制 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 浏览器中工作，不改变样式？

我试图在滚动时删除固定高度，并在动画完成后将其放回原处 - 但页面滚动回顶部!

Playground JSFiddle .

Answer 1

要解决这个溢出滚动问题，我们可以使用 scrollIntoView()方法。我所做的很简单:

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

虽然只有 Firefox 支持 scrollIntoViewOptions，但该方法在所有浏览器中都能正常工作。