如何使用 overflow-y 滚动到 div 中的元素
How do I scroll to an element within a div with overflow-y
我有一个 div,它的 max-height
设置为 300px,因此只要它的内容超过该数量,它就会显示一个滚动条。现在我希望能够单击一个按钮并滚动到 div 中的一个元素。我知道我可以设置主滚动条,但我不确定是否可以操作为我的 div 容器生成的滚动条。
我的 HTML 看起来像这样:
<div style="min-height: 300px; max-height: 300px; overflow: hidden" class="card-block pt-0 pb-0">
<div class="row" style="min-height: 300px; max-height: 300px;">
<div class="col-5" style="overflow-y: auto; min-height: 300px;border-right: 1px solid rgba(0, 0, 0, 0.125); min-height: 300px; max-height: 300px;">
<div class="pt-3 pb-3" style=" max-height: 300px;">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="scroll-here">content</div>
</div>
</div>
</div>
</div>
是否可以滚动到 ID 为 "scroll-here" 的 div?
如果有帮助,我正在使用 Angular 5 和 Bootstrap 4。
使用此代码滚动到跨度
$(#id_of_div_with_scroll).scrollTop($("#your_span_id").offset().top);
只是:
<a href="#scroll-here">Click me</a>
<div style="min-height: 300px; max-height: 300px; overflow: hidden" class="card-block pt-0 pb-0">
<div class="row" style="min-height: 300px; max-height: 300px;">
<div class="col-5" style="overflow-y: auto; min-height: 300px;border-right: 1px solid rgba(0, 0, 0, 0.125); min-height: 300px; max-height: 300px;" id="scroll-container">
<div class="pt-3 pb-3" style=" max-height: 300px;">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="scroll-here">content</div>
</div>
</div>
</div>
</div>
或者,如果你想要动画,那么:
$('button').click(function() {
$("#scroll-container").animate({ scrollTop: $('#scroll-here').offset().top });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>
<div style="min-height: 300px; max-height: 300px; overflow: hidden" class="card-block pt-0 pb-0">
<div class="row" style="min-height: 300px; max-height: 300px;">
<div class="col-5" style="overflow-y: auto; min-height: 300px;border-right: 1px solid rgba(0, 0, 0, 0.125); min-height: 300px; max-height: 300px;" id="scroll-container">
<div class="pt-3 pb-3" style=" max-height: 300px;">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="scroll-here">content</div>
</div>
</div>
</div>
</div>
我有一个 div,它的 max-height
设置为 300px,因此只要它的内容超过该数量,它就会显示一个滚动条。现在我希望能够单击一个按钮并滚动到 div 中的一个元素。我知道我可以设置主滚动条,但我不确定是否可以操作为我的 div 容器生成的滚动条。
我的 HTML 看起来像这样:
<div style="min-height: 300px; max-height: 300px; overflow: hidden" class="card-block pt-0 pb-0">
<div class="row" style="min-height: 300px; max-height: 300px;">
<div class="col-5" style="overflow-y: auto; min-height: 300px;border-right: 1px solid rgba(0, 0, 0, 0.125); min-height: 300px; max-height: 300px;">
<div class="pt-3 pb-3" style=" max-height: 300px;">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="scroll-here">content</div>
</div>
</div>
</div>
</div>
是否可以滚动到 ID 为 "scroll-here" 的 div?
如果有帮助,我正在使用 Angular 5 和 Bootstrap 4。
使用此代码滚动到跨度
$(#id_of_div_with_scroll).scrollTop($("#your_span_id").offset().top);
只是:
<a href="#scroll-here">Click me</a>
<div style="min-height: 300px; max-height: 300px; overflow: hidden" class="card-block pt-0 pb-0">
<div class="row" style="min-height: 300px; max-height: 300px;">
<div class="col-5" style="overflow-y: auto; min-height: 300px;border-right: 1px solid rgba(0, 0, 0, 0.125); min-height: 300px; max-height: 300px;" id="scroll-container">
<div class="pt-3 pb-3" style=" max-height: 300px;">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="scroll-here">content</div>
</div>
</div>
</div>
</div>
或者,如果你想要动画,那么:
$('button').click(function() {
$("#scroll-container").animate({ scrollTop: $('#scroll-here').offset().top });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>
<div style="min-height: 300px; max-height: 300px; overflow: hidden" class="card-block pt-0 pb-0">
<div class="row" style="min-height: 300px; max-height: 300px;">
<div class="col-5" style="overflow-y: auto; min-height: 300px;border-right: 1px solid rgba(0, 0, 0, 0.125); min-height: 300px; max-height: 300px;" id="scroll-container">
<div class="pt-3 pb-3" style=" max-height: 300px;">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="scroll-here">content</div>
</div>
</div>
</div>
</div>