如何使用overflow-y滚动到div中的元素答案

【问题标题】：How do I scroll to an element within a div with overflow-y如何使用overflow-y滚动到div中的元素
【发布时间】：2018-04-25 12:24:49
【问题描述】：

我有一个 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。

【问题讨论】：

标签： javascript css angular bootstrap-4 angular5

【解决方案1】：

只是：

<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>

【讨论】：

【解决方案2】：

使用此代码滚动到跨度

$(#id_of_div_with_scroll).scrollTop($("#your_span_id").offset().top);

【讨论】：

这会操纵主浏览器滚动条，对吗？我想用 overflow-y: auto; 操作在 div 上生成的一个
每次你用 Angular 提到 jquery 时，一个开发者就死了 ^^
哦，好的。为此，而不是 $(window) 使用 $("#id_of_div_with_scroll")
@BleachedAnus 如果能解决您的问题，请选择正确的答案。