Перемещение полосы прокрутки

У меня есть div, где есть сообщения от других пользователей. Я хочу, чтобы, когда они что-то типа, что если DIV будет переполнена, то полоса прокрутки идет в нижней части DIV я попытался это:Перемещение полосы прокрутки

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

но я зайца эту ошибку:

enviar.js: 10 Uncaught TypeError: не удается прочитать свойство 'сверху' неопределенной

тестовой страницы:

<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>

источник

2016-05-29 Alex Braga

Попробуйте это так $ ('div'). animate ({scrollTop: $ ('# final'). offset(). top}, 1000); –

Нет, извините, не работает та же ошибка –

Опубликуйте скрипту своего полного кода. Сделайте это на http://jsfiddle.net –

Вам просто нужно обновить положение прокрутки при добавлении содержимого.

Этот код работает, и существенная часть является 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>

источник

2016-05-29 22:27:09

Спасибо !!! Я применил функцию к моему коду и отлично работает, Tahnk вы !!! –

вы предоставили следующий код:

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

Которая выглядит так, как будто вы обернули элемент #final в двух обертких jQuery. Удалите дубликат $() и он должен работать должным образом. Он не определен, потому что он не может разобрать объект jQuery из другого объекта jQuery. Вот скорректированный код:

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

источник

2016-05-29 20:49:57

, прочитав комментарии. Я уже сказал оператору сделать это. По-прежнему та же ошибка –

Мои извинения, Рэйчел. Я бросил пистолет на этом, спасибо за головы. :) –

[link] (https://jsfiddle.net/m0ktL4hy/) я не знаю, почему результат выглядит так, но на моей странице выглядит очень хорошо ... –

Перемещение полосы прокрутки

ответ

Смежные вопросы