如何在溢出隐藏div内滚动到某个当前不可见的元素? [英] How to scroll within an overflow hidden div to a certain currently invisible element?
本文介绍了如何在溢出隐藏div内滚动到某个当前不可见的元素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个溢出隐藏div中的元素列表。因此并非所有元素都可见。现在,如果一个元素被激活,它应该在div中可见。
I have a list of elements within a overflow hidden div. So not all elements are visible. Now, if an element gets activated, it should become visible within the div.
如何使用jQuery滚动到活动元素?
How do I scroll to the active element using jQuery?
最后一个元素具有活动类只是方便。它将动态切换。
It's merely a convenience that the last element has the active class. It will be toggled dynamically.
var scrollToEl = $("div.element.active");
console.log(zoomToEl);
#main,
#sidebar {
height: 200px;
}
#wrapper {
width: 190px;
float: left;
background: grey;
overflow: auto;
overflow-x: hidden;
}
#sidebar div.element {
height: 150px;
width: 150px;
background-color: green;
margin-bottom: 10px;
}
#sidebar div.element.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="wrapper" class="sidebar">
<div id="sidebar">
<div class="element" data-slide-id="0">a
</div>
<div class="element" data-slide-id="1">b
</div>
<div class="element" data-slide-id="2">c
</div>
<div class="element" data-slide-id="3">d
</div>
<div class="element" data-slide-id="4">e
</div>
<div class="element" data-slide-id="5">f
</div>
<div class="element" data-slide-id="6">g
</div>
<div class="element active" data-slide-id="7">h
</div>
</div>
</div>
</div>
元素应该变得可见:
var scrollToEl = $("div.element.active");
推荐答案
您可以设置 scrollTop
为 top
活动元素的 位置
。
You can set the scrollTop
of the wrapper div to be the top
of the position
of the active element.
$("#wrapper").scrollTop($("#wrapper").scrollTop() + $("div.element.active").position().top);
这篇关于如何在溢出隐藏div内滚动到某个当前不可见的元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文