Comment obtenir le réel de défilement de la hauteur de la div (dire, intérieure taille du texte)

Je suis en train de faire un défilement automatique div qui vont à son sommet lorsqu'il atteint la fin. Mais ça ne fonctionne pas...

function    scrollPannel()
{
    var pannel = document.getElementById('pannel');
    if (typeof scrollPannel.count == 'undefined')
    {
        scrollPannel.count = 0;
    }
    else
    {
        scrollPannel.count += 2;
    }
//trouble is here
    if ((scrollPannel.count - pannel.scrollHeight) > pannel.clientHeight)
    {
        scrollPannel.count = 0;
    }
    pannel.scrollTop = scrollPannel.count;
    setTimeout('scrollPannel()', 500);
}

HTML:

<div id='pannel'  style="height:200px;overflow:auto" onmouseover="sleepScroll()">
    <p>...</p><!-- long text -->
</div>

Et après, je vais devoir trouver comment arrêter le défilement lors de la "onmouseover" se fait.

EDIT: je n'ai pas expliqué clairement le problème. En fait, j'ai essayé quelque chose comme:

if (scrollPannel.count > pannel.scrollHeight)
{
    scrollPannel.count = 0;
}

Le problème est que scrollHeight semble supérieure div intérieure du texte. Donc cela fait beaucoup de temps pour revenir au top.

J'ai donc besoin d'un élément de la propriété de qui je pourrais utiliser la valeur à comparer avec ma variable nombre. Cependant, je ne sais pas Javascript beaucoup et je ne pouvais pas trouver quoi que ce soit. J'espère que c'est aussi simple que je pense à elle.

Quelle est la fonction sleepscroll()?
sleepScroll() est une fonction à mettre en œuvre que je voudrais utiliser pour arrêter le défilement sur l'événement "onmouseover". Dans mon cas, je pense que ce sera un simple clearTimeout ().

OriginalL'auteur kirly | 2013-11-27

  1. 7

    Essayer:

    //calculate max scroll top position (go back to top once reached)
var maxScrollPosition = element.scrollHeight - element.clientHeight;
//example
element.scrollTop = maxScrollPosition;

    Qui devrait faire ce que vous avez besoin.

    OriginalL'auteur

  2. 2

    Vous pouvez essayer d'utiliser le scrollHeight propriété.

    https://developer.mozilla.org/en-US/docs/Web/API/element.scrollHeight

    Vous savez quoi, j'ai pensé à ça o/ Acutally ce que j'ai essayé la première était la suivante: Si (nombre < pannel.scrollHeight)... Mais ne fonctionne pas, scrollHeight semble trop grand
    - ce vraiment le travail pour moi, merci

    OriginalL'auteur kkaosninja

  3. 0

    La solution consiste à jQuery, j'espère que c'est pas un problème.

    JavaScript:

    var timeout;
function scrollPannel()
{
    var divHeight = $("#pannel").height() / 2;
    var scrollCount = $("#pannel").scrollTop();
    var scrollHeight = $("#inside").height() - 20 - divHeight;
    scrollCount += 2;

    if ((scrollCount - scrollHeight) > 0)
    {
        scrollCount = 0;
    }
    $("#pannel").scrollTop(scrollCount);
    timeout = window.setTimeout(scrollPannel(), 100);
}

function scrollStop() {
    window.clearTimeout(timeout);
}

    HTML:

    <div id='pannel' onmouseover="scrollStop();" onmouseout="scrollPannel();">
    <p id="inside"></p><!-- long text -->
</div>

    Explication:
    jQuery .height() de l'intérieur de l'élément de <p> nous donne de la hauteur réelle que vous cherchez, mais il n'est pas assez pour atteindre le fond, puisque qu'il se passe avant d'arriver à l'élément de la hauteur. Une petite enquête montre que le "haut" de la scrollTop() est à mi-chemin à l'intérieur de l'original divhauteur. Vous devrez peut-être jouer avec divHeight d'obtenir exactement les résultats que vous recherchez.

    Bien sûr, j'ai aussi inclus une méthode pour arrêter et continue de défiler.

    Bonne chance!

    Je ne sais pas beaucoup sur les JS, et pas du tout concernant JQuery. Je préfère trouver une solution qui n'est pas autre chose que JS (disons, de préférence sans libs). Bien sûr, si je ne peux pas trouver une autre solution, je vais penser à la vôtre. De toute façon, merci pour votre aide !
    Je ne pense pas qu'il soit possible d'obtenir de l'élément réel de la hauteur sans l'aide de jQuery. Je vous suggère de prendre un peu de temps à l'apprentissage, c'est un outil très puissant 🙂

    OriginalL'auteur Elad Stern

  4. 0

    Vous devez utiliser scrollHeight propriété, mais pour l'appeler, vous devez utiliser un index comme ça:

    $('#pannel')[0].scrollHeight;

    OriginalL'auteur Dmitry Paranyushkin