Moving scrollbar

Ok ich habe ein Div, wo Nachrichten von anderen Benutzern sind. Ich möchte, dass, wenn sie etwas geben, dass, wenn das div überquell ist, die Bildlaufleiste auf der Unterseite des div geht ich das versucht:Moving scrollbar

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

aber ich hace diesen Fehler:

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>

Quelle

2016-05-29 Alex Braga

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

Nein, sorry funktioniert nicht, ist der gleiche Fehler –

Post eine Geige von Ihrem vollständigen Code. Machen Sie eine auf http://jsfiddle.net –

Sie müssen nur die Bildlaufposition aktualisieren, wenn Sie den Inhalt anhängen.

Dieser Code funktioniert, und der wesentliche Teil ist die updatePos() Funktion, die ich in

hinzugefügt haben

Ob Sie PHP verwenden oder nicht, das ist das Bit, die den Unterschied machen.

Sie können Ihre Original-Code verwenden und die updatePos anhängen(), aber dies ist zum Beispiel Zwecke (natürlich, ich habe keinen Zugriff auf Ihre 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>

Quelle

2016-05-29 22:27:09

Vielen Dank !!! Ich habe die Funktion auf meinen Code angewendet und funktioniert super, Tahnk du !!! –

Sie versehen den folgenden Code: Kann nicht Eigentum 'top' undefinierter

die Testseite lesen

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

Das sieht so aus, als ob Sie das Element #final in zwei jQuery-Wrapper eingepackt haben. Entfernen Sie das Duplikat $() und es sollte wie erwartet funktionieren. Es ist nicht definiert, da es ein jQuery-Objekt nicht von einem anderen jQuery-Objekt analysieren kann. Hier ist der korrigierte Code:

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

Quelle

2016-05-29 20:49:57

lesen Sie die Kommentare. Das habe ich dem Op schon gesagt. Immer noch der gleiche Fehler –

Entschuldigung, Rachel. Ich habe die Waffe darauf gesprengt, danke für die Köpfe. :) –

[link] (https://jsfiddle.net/m0ktL4hy/) ich weiß nicht, warum das Ergebnis so aussieht, aber auf meiner Seite sieht sehr gut aus ... –

Moving scrollbar

Antwort

Verwandte Themen