scrollIntoView()移动整个页面

Question

scrollIntoView()移动整个页面

Bhu*_*van 5 html javascript scroll

环境:Firefox 16/27和Chrome 33

我有一个<div>(带滚动条)包含许多元素<p>.

如果我调用scrollIntoView()一个<p>元素,我希望只有div移动的滚动,但整个页面(在...之外<div>)会滚动.

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

这里出了什么问题？

Answer 1

Seb*_*ner 16

只需scrollIntoView()使用参数调用false即可指示它不应滚动到顶部.

有关详细信息,请参阅有关MDN的说明Element.scrollIntoView().

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>

Run Code Online (Sandbox Code Playgroud)

文件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>

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	11 年，9 月前
查看次数：	8218 次
最近记录：	6 年，7 月前