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

【问题标题】：Scroll if div is hidden by overflow如果 div 被溢出隐藏，则滚动
【发布时间】：2013-01-10 15:25:41
【问题描述】：

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

最好的方法是什么？

【问题讨论】：

尝试在 jquery 网站上查找 scrollTo。我在 Theakstons 网站的在线商店中使用了类似的东西
@aaron 我还没有尝试过任何东西，我想在我跳进去之前我会在这里问。我发现这个虽然 stackoverflow.com/questions/5287425/… 有点相关

标签： javascript jquery jquery-selectors scroll

【解决方案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 = 内容容器高度

【讨论】：

【解决方案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()

【讨论】：