"scrollIntoView() 移动整个页面"

Question

Environment: Firefox 16/27 and Chrome 33环境：Firefox 16/27 和 Chrome 33

I have a <div> (with scroll bar) containing lots of elements <p> .我有一个<div> （带有滚动条），其中包含很多元素<p> 。

If I call scrollIntoView() on a <p> element, I expect only the scroll of the div to move, but the complete page (outside of the <div> ) gets scrolled.如果我在<p>元素上调用scrollIntoView() ，我希望只有div的滚动会移动，但整个页面（在<div>之外）会滚动。

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

What is going wrong here?这里出了什么问题？

Answer 1

Just call scrollIntoView() with the parameter false to indicate that it should not be scrolled to the top. 只需使用参数false调用scrollIntoView()即可指示它不应滚动到顶部。

See the description for Element.scrollIntoView() on MDN for more info. 有关详细信息，请参阅MDN上的Element.scrollIntoView()说明。

The reason why the JSFiddle page is scrolled down is that scrollIntoView() scrolls all scrollable ancestor elements to display the element you called scrollIntoView() on. JSFiddle页面向下滚动的原因是scrollIntoView()滚动所有可滚动的祖先元素以显示您调用scrollIntoView()的元素。 And because the <body> of the page is actually higher than the viewport but only scrolling is hidden via overflow: hidden; 并且因为页面的<body>实际上高于视口，但只有通过overflow: hidden;滚动overflow: hidden; , it scrolls the page down trying to align the p element with the top. ，它向下滚动页面，试图将p元素与顶部对齐。

Here's a simple example of this behavior: 以下是此行为的简单示例：

File scroll.html : 文件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>

File scroll2.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>

When you click the Scroll last paragraph into view button, the whole page will be scrolled so that the paragraph is displayed at the top of the viewport. 单击“将最后一个段落滚动到视图”按钮时，将滚动整个页面，以便段落显示在视口的顶部。

Answer 2

You can use: 您可以使用：

scrollIntoView({ block: 'end' })

or for smooth scroll: 或者用于平滑滚动：

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

Answer 3

onClick we can use the below logic onClick 我们可以使用下面的逻辑

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

and for smooth scroll behaviour we can use为了平滑滚动行为，我们可以使用

CSS Properties : CSS 属性：

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

this can avoid page scroll or page shift which happens with这可以避免发生的页面滚动或页面移位

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

"scrollIntoView() 移动整个页面"

问题描述

3 个解决方案

解决方案1
16 已采纳 2014-02-27 09:01:22

解决方案2
1 2018-10-09 22:28:11

解决方案3
0 2022-01-30 12:50:45

"scrollIntoView() 移动整个页面"

问题描述

3 个解决方案

解决方案1 16 已采纳 2014-02-27 09:01:22

解决方案2 1 2018-10-09 22:28:11

解决方案3 0 2022-01-30 12:50:45

解决方案1
16 已采纳 2014-02-27 09:01:22

解决方案2
1 2018-10-09 22:28:11

解决方案3
0 2022-01-30 12:50:45