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

Question

由于 Chrome/iPad 错误，我必须在 html 和正文上设置固定高度，但我无法向下滚动（脚本在 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"});

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

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

How to force Chrome to scroll down on fixed body height?

javascript

css

jquery

webkit