我的页面上有一个div:
<div id='div1' style='overflow:scroll;overflow-x:hidden;max-height:200px;'></div>
我怎样才能使div滚动到div的底部??不是页面,只是DIV。
我的页面上有一个div:
<div id='div1' style='overflow:scroll;overflow-x:hidden;max-height:200px;'></div>
我怎样才能使div滚动到div的底部??不是页面,只是DIV。
当前回答
滚动窗口到目标div的底部。
function scrollToBottom(id){
div_height = $("#"+id).height();
div_offset = $("#"+id).offset().top;
window_height = $(window).height();
$('html,body').animate({
scrollTop: div_offset-window_height+div_height
},'slow');
}
scrollToBottom('call_div_id');
其他回答
这里的其他解决方案实际上并不适用于具有大量内容的div——它“最大”滚动到div的高度(而不是div内容的高度)。所以它们可以工作,除非你有超过div高度两倍的内容在里面。
下面是正确的版本:
$('#div1').scrollTop($('#div1')[0].scrollHeight);
或jQuery 1.6+版本:
var d = $('#div1');
d.scrollTop(d.prop("scrollHeight"));
或动画:
$("#div1").animate({ scrollTop: $('#div1').prop("scrollHeight")}, 1000);
滚动窗口到目标div的底部。
function scrollToBottom(id){
div_height = $("#"+id).height();
div_offset = $("#"+id).offset().top;
window_height = $(window).height();
$('html,body').animate({
scrollTop: div_offset-window_height+div_height
},'slow');
}
scrollToBottom('call_div_id');
我在一个遗留代码库中工作,试图迁移到Vue。
在我的特定情况下(在引导模式中包装的可滚动div), v-if显示了新内容,我希望页面向下滚动到这些内容。为了让这种行为工作,我必须等待vue完成重新渲染,然后使用jQuery滚动到模态的底部。
所以…
this.$nextTick(function() {
$('#thing')[0].scrollTop = $('#thing')[0].scrollHeight;
})
试试这个:
$('#div1').scrollTop( $('#div1').height() )
当页面加载时,滚动是最大的值。
这是消息框,当用户发送消息时,总是显示最新的聊天,所以滚动值总是最大的。
$('#message').scrollTop($('#message')[0].scrollHeight);
见图片