scrollIntoView() 移动整个页面答案

【问题标题】：scrollIntoView() shifting the complete pagescrollIntoView() 移动整个页面
【发布时间】：2014-02-27 08:24:03
【问题描述】：

环境：Firefox 16/27 和 Chrome 33

我有一个<div>（带有滚动条），其中包含很多元素<p>。

如果我在 <p> 元素上调用 scrollIntoView()，我希望只有 div 的滚动会移动，但整个页面（<div> 之外）会滚动。

JSFiddle 示例：http://jsfiddle.net/7fH8K/7/

这里出了什么问题？

【问题讨论】：

标签： javascript html scroll

【解决方案1】：

只需调用scrollIntoView()，带参数false，表示不应该滚动到顶部。

请参阅description for Element.scrollIntoView() on MDN 了解更多信息。

JSFiddle 页面向下滚动的原因是scrollIntoView() 滚动所有可滚动的祖先元素以显示您在其上调用scrollIntoView() 的元素。而且由于页面的<body> 实际上高于视口，但只有通过overflow: hidden; 隐藏滚动，它会向下滚动页面以尝试将p 元素与顶部对齐。

以下是此行为的一个简单示例：

文件scroll.html：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Main page</title>
        <style type="text/css">
        html, body {
            height: 120%;
            width: 100%;
            overflow: hidden;
        }

        header {
            height: 100px;
            width: 100%;
            background-color: yellow;
        }

        iframe {
            height: 100px;
            width: 300px;
        }
        </style>
    </head>
    <body>
        <header></header>
        <iframe src="scroll2.html"></iframe>
    </body>
</html>

文件scroll2.html：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Scrolling &lt;iframe&gt;</title>
        <script type="text/javascript">
        function scrollLastParagraphIntoView() {
            var lastParagraph = document.getElementById("p10");
            lastParagraph.scrollIntoView();
        }
        </script>
    </head>
    <body>
        <button onclick="scrollLastParagraphIntoView()">Scroll last paragraph into view</button>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <p>Paragraph 3</p>
        <p>Paragraph 4</p>
        <p>Paragraph 5</p>
        <p>Paragraph 6</p>
        <p>Paragraph 7</p>
        <p>Paragraph 8</p>
        <p>Paragraph 9</p>
        <p id="p10">Paragraph 10</p>
    </body>
</html>

当您单击将最后一段滚动到视图中按钮时，整个页面将滚动，以便该段落显示在视口的顶部。

【讨论】：

这解决了问题..但仍然无法弄清楚它为什么滚动整个页面..也无法接受您的答案，因为它没有解释出了什么问题。
我希望我的示例能够更清楚地说明为什么滚动整个页面，而不仅仅是包含 <p> 的 <div>。

【解决方案2】：

你可以使用：

scrollIntoView({ block: 'end' })

或平滑滚动：

scrollIntoView({ block: 'end', behavior: 'smooth' })

【讨论】：

请注意，在发表此评论时，Safari（很遗憾）不支持这些选项。它只接受布尔参数：caniuse.com/#feat=scrollintoview

【解决方案3】：

onClick 我们可以使用下面的逻辑

var target = document.getElementById("target");
target.parentNode.scrollTop = target.offsetTop;

对于平滑的滚动行为，我们可以使用

CSS 属性：

scroll-behavior: smooth;
overscroll-behavior: contain;

这可以避免发生页面滚动或页面移位

scrollIntoView({ block: 'start', behavior: 'smooth' })

【讨论】：