ScrollIntoView() 导致整个页面移动

IT技术 javascript css
2021-03-11 17:27:26

我正在使用 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 调用。使用移动Safari。

提前感谢您的帮助!

6个回答

修复它:

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

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

这解决了我的问题。一段时间以来,我一直在我们的网络应用程序中看到这种情况发生,但很难锁定它的重现。添加新功能后,它每次都会发生,我能够将其跟踪到缺少block : 'nearest'参数的此调用
2021-04-23 17:27:26
适用于 Chrome,但不适用于我的 Edge。
2021-04-28 17:27:26
“最近”是什么意思?编辑:在这里找到答案:stackoverflow.com/a/48635751/628418
2021-04-29 17:27:26
谢谢这工作。当我阅读它时,我未能理解块的使用及其value。现在它解决了一个问题,我知道它在做什么
2021-05-10 17:27:26
“block: 'nearest'” 有效,但“block: 'center'”(更好一些)仍然滚动视口。很高兴知道这是错误还是功能......
2021-05-15 17:27:26

您可以使用scrollTop代替scrollIntoView()

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

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

如果要滚动的可滚动元素不止一个,则需要scrollTop根据offsetTop中间元素s分别更改每个元素s。这应该给你细粒度的控制,以避免你遇到的问题。

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

target.parentNode.scrollTop = target.offsetTop - target.parentNode.offsetTop;
offsetTop 是相对于最近定位的父节点,所以如果父节点有position: relative,那么你不应该减去它的偏移量。但在大多数情况下你是对的。
2021-04-20 17:27:26
@Brilliand 感谢您对 prent position: relativediv 的想法:它确实解决了问题
2021-04-20 17:27:26
这是一个 js 小提琴:jsfiddle.net/LEqjm/258,它也显示了 ScrollIntoView 的不当行为。
2021-04-21 17:27:26
仅供参考,这仅在父级位于页面顶部时有效。你应该能做到target.parentNode.scrollTop = target.offsetTop - target.parentNode.offsetTop
2021-05-09 17:27:26
它正在 chrome 上工作,但它在 IE 上滚动得更多一点,它从顶部隐藏了文本内容。任何解决方案@Phil,提前致谢
2021-05-14 17:27:26
var el = document.querySelector("yourElement");
window.scroll({top: el.offsetTop, behavior: 'smooth'});
或者你可以使用 top: el['offsetTop']
2021-04-30 17:27:26
这对我来说效果最好。但是在 Firefox 上仍然有一些问题 - 有时它会在元素的一部分停止。边缘和镀铬效果很好。
2021-05-18 17:27:26

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

我的修复最终是:

  • 对于 Chrome:更改.scrollIntoView().scrollIntoView({block: 'nearest'})(感谢 @jfrohn)。
  • 对于 Firefox:应用于overflow: -moz-hidden-unscrollable;移动的容器元素。
  • 未在其他浏览器中测试。
貌似overflow: clip是新的-moz-hidden-unscrollable
2021-05-05 17:27:26

试试看scrollIntoViewIfNeeded()……确保浏览器支持它。

不知道是一回事。一个 polyfill
2021-04-25 17:27:26
在文档中,它提到它是非标准的,但它工作正常。我们应该使用它吗?
2021-05-03 17:27:26