ScrollIntoView()导致整个页面移动

Question

我正在使用ScrollIntoView()将列表中突出显示的项目滚动到视图中.当我向下滚动ScrollIntoView(false)完美地工作.但是当我向上滚动时,ScrollIntoView(true)会导致整个页面移动一点我认为是有意的.有没有办法在使用ScrollIntoView(true)时避免整个页面移动？

这是我页面的结构 -

#listOfDivs {
  position:fixed;
  top:100px;
  width: 300px;
  height: 300px;
  overflow-y: scroll;
}

<div="container">
    <div="content"> 
         <div id="listOfDivs"> 
             <div id="item1"> </div>
             <div id="item2"> </div>
             <div id="itemn"> </div>
         </div>
    </div>
</div>

listOfDivs来自ajax调用.使用移动野生动物园.

感谢您的帮助!

Answer 1

您可以使用scrollTop而不是scrollIntoView():

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

jsFiddle:http://jsfiddle.net/LEqjm/

如果要滚动多个可滚动元素,则需要scrollTop根据offsetTop插入元素的s 单独更改每个元素.这应该给你细粒度的控制,以避免你遇到的问题.

编辑:offsetTop不一定相对于父元素 - 它相对于第一个定位的祖先.如果父元素未定位(相对,绝对或固定),您可能需要将第二行更改为:

target.parentNode.scrollTop = target.offsetTop - target.parentNode.offsetTop;

Answer 2

修复它:

element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })

请参阅:https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Answer 3

我也遇到了这个问题，并花了很多时间试图解决它。我希望我的决心仍然可以帮助一些人。

我的修复最终是：

• 对于 Chrome：更改.scrollIntoView()为.scrollIntoView({block: 'nearest'})（感谢 @jfrohn）。
• 对于 Firefox：应用于overflow: -moz-hidden-unscrollable;移动的容器元素。
• 未在其他浏览器中测试。

Answer 4

只是根据我在 VueJs 上的最新经验添加答案。我发现下面的代码是最好的，无论如何它都不会影响您的应用程序。

const el = this.$el.getElementsByClassName('your_element_class')[0];
if (el) {
   scrollIntoView(el,
                  {
                       block: 'nearest',
                       inline: 'start',
                       behavior: 'smooth',
                       boundary: document.getElementsByClassName('main_app_class')[0]
                    });
     }

main_app_class是根类

your_element_class是您可以滚动到的元素/视图

对于不支持 ScrollIntoView() 的浏览器，只需使用下面的库，它很棒 https://www.npmjs.com/package/scroll-into-view-if-needed

Answer 5

玩弄scrollIntoViewIfNeeded()...确保浏览器支持它.

Answer 6

添加更多信息以@Jesco发布。

• Element.scrollIntoViewIfNeeded() non-standard WebKit method适用于 Chrome、Opera、Safari 浏览器。
  如果元素已经位于浏览器窗口的可见区域内，则不会发生滚动。
• Element.scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。

尝试链接中的以下代码mozilla.org scrollIntoView()。^{发帖识别浏览器}

var xpath = '//*[@id="Notes"]';
ScrollToElement(xpath);

function ScrollToElement(xpath) {
    var ele = $x(xpath)[0];
    console.log( ele );

    var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
    if (isChrome) { // Chrome
        ele.scrollIntoViewIfNeeded();
    } else {
        var inlineCenter = { behavior: 'smooth', block: 'center', inline: 'start' };
        ele.scrollIntoView(inlineCenter);
    }
}

Answer 7

在我的上下文中，他会将粘性工具栏从屏幕上推开，或者在带有绝对值的 fab 按钮旁边输入。

使用最近的解决。

const element = this.element.nativeElement;
const table = element.querySelector('.table-container');
table.scrollIntoView({
  behavior: 'smooth', block: 'nearest'
});

Answer 8

jQuery插件scrollintoview()增加了可用性

而不是默认的DOM实现,您可以使用动画动画的插件,没有任何不需要的效果.以下是使用默认值的最简单方法:

$("yourTargetLiSelector").scrollintoview();

无论如何,请访问此博客文章,您可以阅读所有详细信息,最终将获得插件的GitHub源代码.

此插件会自动搜索最近的可滚动祖先元素并滚动它,以便所选元素位于其可见视图端口内.如果元素已经在视口中,它当然不会做任何事情.

Answer 9

我添加了一种方法来显示ScrollIntoView的不正常行为 - http://jsfiddle.net/LEqjm/258/ [它应该是评论,但我没有足够的声誉]

$("ul").click(function() {
    var target = document.getElementById("target");
if ($('#scrollTop').attr('checked')) {
    target.parentNode.scrollTop = target.offsetTop;    
} else {
        target.scrollIntoView(!0);
}
});

Answer 10

var el = document.querySelector("yourElement");
window.scroll({top: el.offsetTop, behavior: 'smooth'});