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

【问题标题】：How to force Chrome to scroll down on fixed body height?如何强制 Chrome 在固定的身体高度上向下滚动？
【发布时间】：2017-04-28 05:17:40
【问题描述】：

由于 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 上的游乐场。

【问题讨论】：

似乎溢出可能有问题：auto
是的，但我找到了方法，现在应该发布。
您的内容比正文长，但正在尝试滚动正文...
嗯，没错，知道为什么它可以在 Firefox 中运行吗？
真的不知道，10 年前我为 IE 破解 css 和 js 的方式，现在我为 Chrome、旧 iPhone 和 iPad 破解了。真希望有一个浏览器，即使它是旧的 IE6。谢谢大家。

标签： javascript jquery css webkit

【解决方案1】：

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

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

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

【讨论】：