Div Overflow Scroll-vers le bas: Est-ce possible?

Si j'ai un div avec overflow:auto de sorte qu'il est un défilement div et je le charger avec de l'information qui fait une importante zone de défilement, est-il un moyen pour que lorsque je charge l'information, l' div montre le fond de résultats? Ou essentiellement défile vers le bas?

J'ai vu jQuery solutions, mais c'est pour une utilisation dans une HTA donc je ne peux pas utiliser jQuery. Est-il purement javascript façon d'accomplir cette?

source d'informationauteur thepip3r

  1. 11
    var myDiv = document.getElementById('myDiv');
myDiv.scrollTop = myDiv.scrollHeight;

    Fonctionne dans Firefox, Safari, Opera, Chrome et Internet Explorer, qui est plus que je peux dire pour l'ESS cas de test j'ai Mis en place... lol

    Je vous épargne la diatribe sur la obtus des solutions proposées par les autres, et voici un exemple de code qui pourrait être utilisé pour une messagerie instantanée de type client.

    document.body.onload = function()
{
    var myDiv = document.getElementById('myDiv');
    //Pick your poison below, server sent events, websockets, AJAX, etc.
    var messageSource = new EventSource('somepage');
    messageSource.onmessage = function(event)
    {
        //You must add border widths, padding and margins to the right.
        var isScrolled = myDiv.scrollTop == myDiv.scrollHeight - myDiv.offsetHeight;
        myDiv.innerHTML += event.data;
        if(isScrolled)
            myDiv.scrollTop = myDiv.scrollHeight;
    };
};

    Le cadre de cet exemple est pertinent vérifie si la div est déjà défile vers le bas, et si elle l'est, fait défiler vers le bas après l'ajout de données. Si ce n'est déjà fait défiler vers le bas, le div de la position de défilement va rester tel que le contenu visible de la div n'est pas affectée par l'ajout de données.

  2. 10
    document.getElementById('mydiv').scrollTop = 9999999;

    La scrollTop propriété spécifie la vitesse de défilement décalage en pixels à partir du haut de la région. Un réglage à une très grande valeur de la force vers le bas.

  3. 1

    Comment à ce sujet?

    function scroll_to_max(elm) { //{{{
    if(!scroll_to_max_el) {
        scroll_to_max_el = elm;
        setTimeout(scroll_to_max, 10); //Allow for the element to be updated
    } else {
        var el = scroll_to_max_el;
        var t = el.scrollTop;
        el.scrollTop = t+100;
        if(el.scrollTop != t) {
            setTimeout(scroll_to_max, 10); //Keep scrolling till we hit max value
        } else {
            scroll_to_max_el = null;
        }
    }
}
var scroll_to_max_el = null; //Global var!
//}}}

    (NOTE: Uniquement testé sur Chrome...)

  4. 1

    Réponse tardive mais c'est beaucoup plus utile

    $('#mydiv').scrollTop(($('#mydiv').height()*2));

  5. 0

    Je pense que vous devez définir la scrollTop après l'élément est mis à jour.

    setTimeout(function (){ 
  el.scrollTop = 999999999
}, 10)

    aussi, au chrome, au moins, 99999999999 seront faites défiler vers le bas. mais 999999999999 (un supplément de 9) fera défiler vers le haut. c'est probablement converti en int dans le C côté de webkit.