好的，我有一个 div，其中有来自其他用户的消息。我希望当他们输入某些内容时，如果 div 溢出，滚动条会转到 div 的底部我已经尝试过:
$('div').animate({scrollTop: $( $( '#final' ) ).offset().top}, 1000);
但是我遇到了这个错误:
enviar.js:10 未捕获类型错误:无法读取未定义的属性“top”
测试页面:
<body background="fondos/fondo-inicio.jpg"">
<ul>
<li><a class="active" href="inicio.php">Inicio</a></li>
<li><a href="paginaad.php">Administracion</a></li>
<li><a href="comentarios.php">Reporta</a></li>
<ul style="float:right;list-style-type:none;">
<li><a href="#about">Sobre mi</a></li>
<li><a href="salir.php">Logout</a></li>
</ul>
</ul>
<div id="contenedor"><span id="final"></span></div>
<input type="text" id="mensaje" name="mensaje" />
<button id="boton">Enviar</button>
</body>
最佳答案
您只需要在追加内容时更新滚动位置即可。
这段代码有效，最重要的部分是我添加的 updatePos() 函数
无论您使用 php 还是其他方式，这一点都会产生影响。
您可以使用原始代码并附加 updatePos() 但这仅用于示例目的(显然我无权访问您的数据库)
$(function() {
$('#boton').on('click', function() {
var content = $('#mensaje').val();
$('#contenedor').append(content + '<br>');
$('#final').animate({
scrollTop: $('#contenedor').offset().top
}, 1000);
$('#mensaje').val('');
updatePos();
});
});
$(function() {
$('#mensaje').keydown(function(event) {
if (event.which == 13 || event.keycode == 13) {
var content = $('#mensaje').val();
$('#contenedor').append(content + '<br>');
$('#mensaje').val('');
updatePos();
}
});
function updatePos() {
var element = document.getElementById("contenedor");
element.scrollTop = element.scrollHeight;
}
});#contenedor {
width: 40%;
height: 200px;
border-style: solid!important;
border-width: 3px!important;
overflow-y: scroll;
position: relative;
margin-bottom: 10px;
top: 20%;
left: 30%;
background-color: white;
border-style: solid;
border-width: 3px;
border-color: #07B3D1;
}
#mensaje {
width: 20%;
height: 6%;
position: relative;
display: inline-block;
left: 30.2%;
border-style: solid;
border-width: 3px;
border-color: #07B3D1;
}
#boton {
width: 5%;
min-width: 75px;
height: auto;
border-style: solid;
border-width: 3px;
border-color: #07B3D1;
position: relative;
display: inline-block;
left: 30%;
transition: all 0.5s;
font-size: 100%;
}
#boton:hover {
box-shadow: 0 10px 10px 0 #FFFFFF;
}
#final {
width: 100%;
height: 200px!important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body background="fondos/fondo-inicio.jpg">
<ul>
<div id="contenedor"> <span id="final"></span></div>
<input type="text" id="mensaje" name="mensaje">
<button id="boton">Enviar</button>
</ul>
</body>关于javascript - 移动滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37514663/