如何让隐藏状态的.list_messages元素默认滚动到底部？

这个问题很常见——当元素设置为display: none时，浏览器不会渲染它的滚动相关属性（比如scrollHeight），直接设置scrollTop自然不会生效。下面给你几个可行的解决方案：

方案1：临时渲染隐藏元素以计算滚动值 #

我们可以先让元素短暂处于可被渲染的状态（但视觉上不可见），设置滚动后再恢复隐藏状态。比如用visibility: hidden或者把元素移到视窗外，浏览器会计算它的尺寸和滚动属性，但用户完全看不到：

$(document).ready(function() {
  var b = $(window).height();
  var c = $('.tbl-header').height();
  $(".list_messages").css("max-height", b - 60);

  $(".discussion").each(function(){
    var $discussion = $(this);
    var testdata = $discussion.attr('data');
    var $list = $('#list_messages'+testdata);

    // 检查元素是否处于隐藏状态
    if ($discussion.is(':hidden')) {
      // 保存元素原本的样式
      var originalStyle = $discussion.attr('style') || '';
      // 临时设置元素为可渲染但不可见的状态
      $discussion.css({
        'visibility': 'hidden',
        'display': 'block',
        'position': 'absolute',
        'left': '-9999px'
      });
      // 此时可以正常设置滚动到底部
      $list.scrollTop($list[0].scrollHeight);
      // 恢复元素原来的样式
      $discussion.attr('style', originalStyle);
    } else {
      // 显示状态的元素直接设置滚动
      $list.scrollTop($list[0].scrollHeight);
    }
  });
});

方案2：在元素显示时触发滚动 #

如果这些隐藏的.discussion是通过用户交互（比如点击标签、按钮）切换显示的，那在显示元素的事件回调里执行滚动逻辑会更高效：

// 假设触发显示的按钮有类名.show-discussion，且存储了对应discussion的data值
$('.show-discussion').on('click', function() {
  var dataId = $(this).data('discussion-id');
  var $discussion = $('#incidence_' + dataId);
  var $list = $('#list_messages' + dataId);

  // 先显示元素
  $discussion.show();
  // 元素显示后立即设置滚动到底部
  $list.scrollTop($list[0].scrollHeight);
});

// 初始化时只处理已经显示的元素
$(document).ready(function() {
  var b = $(window).height();
  var c = $('.tbl-header').height();
  $(".list_messages").css("max-height", b - 60);

  $(".discussion:visible").each(function(){
    var testdata = $(this).attr('data');
    $('#list_messages'+testdata).scrollTop($('#list_messages'+testdata)[0].scrollHeight);
  });
});

方案3：替换display:none为其他隐藏方式 #

如果可以修改HTML的隐藏逻辑，用opacity: 0或者visibility: hidden代替display: none，这两种方式下元素仍然会被浏览器完整渲染，滚动属性可以正常计算：

修改后的HTML示例：

<div id="incidence_4" class="discussion col-md-8" data="4" style="opacity: 0; visibility: hidden;">
 <div id="list_messages4" class="list_messages" colspan="7" style="max-height: 653px;">

这种情况下你原本的代码就能正常工作了，不过要注意：opacity:0和visibility:hidden会保留元素的布局空间，如果这不符合你的布局需求，方案1或2会更合适。

内容的提问来源于stack exchange，提问作者Slown1970