Question

HTML

<div id="speech"></div>
<div id="test"></div>
<div id="testt"></div>

CSS

/*speech bubble*/
.bubble {
position: relative;
width: auto;
height: 40px;
padding-left: 10px;
padding-right: 10px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-family: sans-serif;
font-size: 15px;
display: inline-block;
left: 17px;
vertical-align: middle;
line-height: 40px; 
max-width: 240px;
float: left;
clear: both;
}

.bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: -10px;
top: 10px;
}

#test, #testt {
height: 100px;
width: 100px;
}
#speech {
height: 500px;
width: 200px;
float: right;
overflow-y: scroll;
background-color: #000;
}

的javascript

$(document).ready(function () {
"use strict";
$("#test").click(function () {
    $("#speech").append('<p class="bubble">test223123</p>');
});
$("#testt").click(function () {
    $("#speech").append('<p class="bubble">test</p>');
});
});

当我点击“测试”几次时，附加到语音div中的语音气泡继续向下，但滚动内容保持在顶部。

如果添加新的语音气泡，我如何使滚动条到达底部？

Answer 1

非常简单，只需使用scrollTop函数即可。添加以下单行：

$('#speech').scrollTop($('#speech').height());

你现在只是追加你的泡泡。添加气泡后，您会找到div的高度，并使用此值向下滚动。

我做了一点codepen，您可以在其中查看所有代码。

Answer 2

不要使用高度，而是使用scrollHeight

$(document).ready(function () {
   "use strict";
   $("#test").click(function () {
     $("#speech").append('<p class="bubble">test223123</p>').scrollTop($("#speech").prop("scrollHeight"));
   });
   $("#testt").click(function () {
     $("#speech").append('<p class="bubble">test</p>').scrollTop($("#speech").prop("scrollHeight"));
   });
});

自动向下移动可滚动div

2 个答案: