Question

好的，我有一个div，其中有来自其他用户的消息。我想在他们输入内容时，如果div溢出，滚动条会转到div的底部我试过这个：

$('div').animate({scrollTop: $( $( '#final' ) ).offset().top}, 1000);

但是我遇到了这个错误：

enviar.js：10未捕获的TypeError：无法读取未定义的属性“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>

Answer 1

您提供了以下代码：

$('div').animate({scrollTop: $( $( '#final' ) ).offset().top}, 1000);

看起来好像你已经将#final元素包装在两个jQuery包装器中。删除重复的$()，它应该按预期工作。它未定义，因为它无法从另一个jQuery对象解析jQuery对象。这是更正后的代码：

$('div').animate({
  scrollTop: $('#final').offset().top
}, 1000);

Answer 2

您只需在附加内容时更新滚动位置。

此代码有效，而基本部分是我在

中添加的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>

移动滚动条

2 个答案: