移动滚动条
好的,我有一个div来自其他用户的消息。我想,当他们键入的东西,如果DIV是四溢,滚动进入到div的底部,我已经试过这样:移动滚动条
$('div').animate({scrollTop: $($('#final')).offset().top}, 1000);
但我脑水肿此错误:
enviar.js: 10遗漏的类型错误:无法读取未定义
测试页面的属性“顶”:
<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(),但这是为了举例的目的(当然我没有访问您的DB)
$(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>
谢谢!我已经将这个函数应用到了我的代码中,并且工作得很好,Tahnk你! –
您提供以下代码:
$('div').animate({scrollTop: $($('#final')).offset().top}, 1000);
看起来好像您已经将#final
元素封装在两个jQuery包装器中。删除重复的$()
,它应该按预期工作。它是未定义的,因为它无法从另一个jQuery对象解析jQuery对象。以下是更正的代码:
$('div').animate({
scrollTop: $('#final').offset().top
}, 1000);
上阅读评论。我已经告诉过你这样做。还是一样的错误 –
我的歉意,瑞秋。我跳了那把枪,谢谢你的抬头。 :) –
[链接](https://jsfiddle.net/m0ktL4hy/)我不知道为什么结果看起来像这样,但在我的网页看起来非常好... –
尝试像这样$('div')。animate({scrollTop:$('#final')。offset()。top},1000); –
不,抱歉不工作是相同的错误 –
张贴您的完整代码的小提琴。请在http://jsfiddle.net –