无法滚动到 div 的底部答案

【问题标题】：Unable to scroll to bottom of div无法滚动到 div 的底部
【发布时间】：2016-10-26 13:49:48
【问题描述】：

我已经尝试了网上所有可用的方法，但单击元素时无法滚动到div的底部。

但我可以在手动滚动 div 时确定底部。请帮我自动滚动到 div 的底部。

确定 div 滚动时的底部

$(".ckit-container__bd").on('scroll', function() {
    if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
        alert('bottom');
    }
});

尝试自动滚动到底部：

1)$('.ckit-container__bd').scrollTop($('.ckit-container__bd').offset().top);

 $(".ckit-container__bd").animate({
    scrollTop: $('.ckit-container__bd')[0].scrollHeight - $('.ckit-container__bd')[0].clientHeight
 }, 1000);

var objDiv = document.getElementsByClassName("ckit-container__bd");
objDiv.scrollTop = objDiv.scrollHeight;

DOM 结构：

【问题讨论】：

你也许可以从这个post得到一个想法
显示你的html代码
@TheMechanic，我在上面的帖子中添加了 DOM 结构作为图像。请注意，具有此类的 div 具有滚动条 .ckit-container__bd，我需要深入到该 div 的底部。跨度>

标签： javascript jquery

【解决方案1】：

$("button").on("click", function(){
  
  var $sc = $("#scrollable"); // Store your element reference

  $sc.stop().animate({
     scrollTop: $sc[0].scrollHeight - $sc[0].clientHeight
  }, 800);
  
});

#scrollable{height:150px; width:200px; overflow:auto;}
p{height:500px; border:2px dashed #000;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>SCROLL TO BOTTOM</button>
<div id="scrollable">
<p></p>
</div>

【讨论】：

【解决方案2】：

我通过将 scrollTopvalue 从 0 更改为 20000 解决了这个问题。

$('.ckit-container__bd').animate({scrollTop: 20000}, 2000);

【讨论】：

20000 几乎是一个不错的解决方案 :)

【解决方案3】：

滚动将在显示窗口中起作用。

像div这样的元素不是显示窗口，所以即使底部位置有效，滚动也是无效的。

也许你可以试着这样想——滚动意味着元素移动。一个element[div]作为一个wrap和style属性[overflow:hidden]，一个element[div]在里面并移动内部的element[div]实现滚动功能。

希望对你有所帮助。

【讨论】：

我已经有内部元素，即 .ckit-container__bd 和 wrapper..但它没有深入。可能只有前几次它会自动滚动，但之后就不会了