Question

我想在页面加载后立即获取div底部的滚动条，但它无法正常工作

我的设计：

<div class="panel-body" id="dvMsgBody" style="padding: 0px;">
    <div id="dvMessage" class="col-lg-12" style="height: 500px; overflow: auto; margin: 0px; padding: 0px; width: 100%;">
    </div>
</div>

我的jQuery：

//not working
{
    $("#divChatWindow").find('#dvMsgBody').find('#dvMessage').scrollTop($('#dvMessage')[0].scrollHeight);
}


//not working
{
    $("#divChatWindow").find('#dvMsgBody').find('#dvMessage').animate({ scrollTop: $('#dvMessage')[0].scrollHeight }, 1000);
}

//not working
{
    $('#dvMessage').scrollTop($('#dvMessage')[0].scrollHeight);
}

Answer 1

Working fiddle

(function($) {
  $(window).load(function() {
    $('#dvMessage').stop().animate({ scrollTop: $('#dvMessage').prop('scrollHeight') }, 1000);
  });
})(jQuery);

Answer 2

我为你创建了一个简单的jsFiddle：https://jsfiddle.net/azp9vjyk/

的jQuery

$(function()
  {
    $('.scroll').animate({ scrollTop: $('.scroll').prop('scrollHeight') }, 5000);
});

HTML

<div class="scroll">Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. </div>

页面加载时，滚动条不在div的底部

2 个答案: