Question

环境：Firefox 16/27和Chrome 33

我有<div>（带滚动条），其中包含大量元素<p>。

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

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

这里出了什么问题？

Answer 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>

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

Answer 2

您可以使用：

scrollIntoView({ block: 'end' })

或进行平滑滚动：

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

scrollIntoView（）移动整个页面

2 个答案: