Question

我正在检测何时带有'.selected'类的div低于其容器div的底部（由overflow：hidden隐藏）。如果是，则向下滚动容器的内容以显示下一个“页面”，方法是滚动容器高度的等效值，或者滚动直到'.selected'再次位于容器的顶部。

这样做最好的方法是什么？

Answer 1

我使用scrollTo和我在评论中发布的链接中的一些数学来实现：

var top = it.position().top; 
var bd = top + it.height();     
var ch = $('.tab-demo-content').height();     
if(bd>ch){  //if focused item isn't visible, scroll to it
    $(it).closest('.tv-container-vertical').scrollTo(it,500);   //this finds its parent container and scrolls it
}

bd =从容器顶部到所选项目底部的距离
ch =内容容器高度

Answer 2

适当的原生（非jquery）javascript代码是：

element.scrollIntoView(); // Equivalent to element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean arguments
element.scrollIntoView(scrollIntoViewOptions); // Object argument

（见https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView）

大多数现代浏览器也支持scrollIntoViewIfNeeded（）：

element.scrollIntoViewIfNeeded()

如果div被溢出隐藏，则滚动

2 个答案: