无法滚动到div

Question

我已尝试过网络上的所有可用方法，但在单击某个元素时无法滚动到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);

2）

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

3）

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

DOM结构：

Answer 1

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我通过将scrollTopvalue从0更改为20000来解决此问题。

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

Answer 3

滚动将在显示窗口中工作。

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

也许你可以尝试这样思考 - 滚动意味着元素移动。元素[div]作为wrap和style属性[overflow：hidden]，其中包含一个元素[div]并移动内部元素[div]以实现函数滚动。

希望对你有所帮助。