如何在点击时将滚动条放在 div 的底部答案

【问题标题】：How to put the scroll at the bottom of the div on click如何在点击时将滚动条放在 div 的底部
【发布时间】：2019-01-19 09:44:06
【问题描述】：

为什么滚动代码不起作用？当我点击$('#openDiv')时，我希望滚动到底部。

示例：当您在 stackoverflow 上进入聊天室时，您会看到滚动条默认位于底部，我想要这个。

我也试过把滚动代码放在点击功能外面，但是不行……

$(document).ready(function() {

  $('#openDiv').on('click', function(){
    $('#openDiv').hide();
    $('#closeDiv').show();
    
    ///////// NOT WORKING /////////
    $("#mainDiv").animate({
      scrollTop: $('#mainDiv').prop("scrollHeight")
    }, 1000);
    ///////// NOT WORKING /////////
    
    $("#mainDiv").show();
  });
  
  $('#closeDiv').on('click', function(){
    $('#closeDiv').hide();
    $("#mainDiv").hide();
    $('#openDiv').show();
  });
  
});

#mainDiv {
  height: 150px;
  background-color: #2A2A2A;
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
}

#divText {
  color: #fff;
  background-color: #555555;
  height: 20px;
}
#divTextEnd{
  color: #fff;
  background-color: red;
  height: 20px;
}

#openDiv{
  background-color: green;
  border: none;
  color: #fff;
}

#closeDiv{
  display: none;
  background-color: red;
  border: none;
  color: #fff;
}

<button id="openDiv">Open div</button>
<button id="closeDiv">Close div</button>

<div id="mainDiv">

  <div id="divText">
    <h5>text</h5>
  </div>
  <div id="divText">
    <h5>text</h5>
  </div>
  <div id="divText">
    <h5>text</h5>
  </div>
  <div id="divText">
    <h5>text</h5>
  </div>
  <div id="divTextEnd">
    <h5>text</h5>
  </div>

</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

【问题讨论】：

标签： jquery css scroll

【解决方案1】：

在您调用$('#mainDiv').prop("scrollHeight") 的那一刻，#mainDiv 被display: none; 隐藏。这样一个元素的scrollHeight 为 0。

在尝试滚动之前显示#mainDiv：

$(document).ready(function() {

  $('#openDiv').on('click', function() {
    $('#openDiv').hide();
    $('#closeDiv').show();

    $("#mainDiv").show();

    $("#mainDiv").animate({
      scrollTop: $('#mainDiv').prop("scrollHeight")
    }, 1000);
  });

  $('#closeDiv').on('click', function() {
    $('#closeDiv').hide();
    $("#mainDiv").hide();
    $('#openDiv').show();
  });

});

#mainDiv {
  height: 150px;
  background-color: #2A2A2A;
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
}

#divText {
  color: #fff;
  background-color: #555555;
  height: 20px;
}

#divTextEnd {
  color: #fff;
  background-color: red;
  height: 20px;
}

#openDiv {
  background-color: green;
  border: none;
  color: #fff;
}

#closeDiv {
  display: none;
  background-color: red;
  border: none;
  color: #fff;
}

<button id="openDiv">Open div</button>
<button id="closeDiv">Close div</button>

<div id="mainDiv">

  <div id="divText">
    <h5>text</h5>
  </div>
  <div id="divText">
    <h5>text</h5>
  </div>
  <div id="divText">
    <h5>text</h5>
  </div>
  <div id="divText">
    <h5>text</h5>
  </div>
  <div id="divTextEnd">
    <h5>text</h5>
  </div>

</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

【讨论】：