Javascript elemento scorrevole

Question

Vorrei sapere qual è la tecnica migliore per far scorrere un elemento proprio come in questi esempi:

  

http://demos.flesler.com/jquery/localScroll/#section1c

Ma con Pure Javascript così NOT jQuery o qualsiasi libreria.

Esempio struttura

<div id="holder">
    <div id="bridge" onclick="slide('content')">Click to slide</div>
    <div id="content" style="display:block;">The content</div>
</div>

Quindi, se clicco su id=bridge il id=content sarà slide up e l'imposta di display a none e se clicco su di nuovo quindi imposta è di display per block e slides down;

Answer 1

L'animazione scorrevole in sé, come tutte le animazioni in javascript, viene fatta con funzioni di temporizzazione: setTimeout o setInterval. Per gli effetti semplici come questo preferisco sempre setTimeout dal momento che è più facile per terminare la sequenza di animazione rispetto a setInterval. Come funziona è quello di valori degli attributi cambiamento CSS utilizzando setTimeout:

// move the content div down 200 pixels:

var content = document.getElementById('content');

function moveDown () {
    var top = parseInt(content.style.marginTop); // get the top margin
                                                 // we'll be using this to
                                                 // push the div down

    if (!top) {
        top = 0; // if the margin is undefined, default it to zero
    }

    top += 20; // add 20 pixels to the current margin

    content.style.marginTop = top + 'px'; // push div down

    if (top < 200) {
        // If it's not yet 200 pixels then call this function
        // again in another 100 milliseconds (100 ms gives us
        // roughly 10 fps which should be good enough):
        setTimeout(moveDown,100);
    }
}

Questo è in sostanza i principi fondamentali di animazione in javascript. L'idea è molto semplice. È possibile utilizzare qualsiasi attributo di stile CSS per l'animazione:. Sopra ea sinistra per elementi posizionati assoluti o relativi, i margini come il mio esempio, la larghezza, l'altezza, la trasparenza etc

Ora, come per quello di utilizzare nel tuo caso specifico dipende esattamente ciò che le vostre intenzioni sono. Ad esempio, la cosa più semplice da fare ciò che si descrive potrebbe essere quella di modificare l'altezza div fino a quando diventa zero. Qualcosa di simile:

function collapseContent () {
    var height = parseInt(content.style.height);

    if (!height) {
        height = content.offsetHeight; // if height attribute is undefined then
                                       // use the actual height of the div
    }

    height -= 10; // reduce height 10 pixels at a time

    if (height < 0) height = 0;

    content.style.height = height + 'px';

    if (height > 0) {
        // keep doing this until height is zero:
        setTimeout(collapseContent,100);
    }
}

Ma non è così che il plugin jQuery esempio lo fa. Si looke come si muove l'elemento spostando il suo attributo di stile in alto a sinistra e contenuti e pelli fuori dello schermo utilizzando un div contenitore con overflow:hidden.

Answer 2

La mia soluzione utilizza una transizione css:

<style type="text/css">
    #slider {
        box-sizing: border-box;
        transition: height 1s ease;
        overflow: hidden;
    }
</style>

<div id="slider" style="height: 0">
    line 1<br>
    line 2<br>
    line 3
</div>

<script>
    function slideDown(){
        var ele = document.getElementById('slider');
        ele.style.height = "3.3em";

        // avoid scrollbar during slide down
        setTimeout( function(){
            ele.style.overflow = "auto";
        }.bind(ele), 1000 );                        // according to height animation
    }

    function slideUp(){
        var ele = document.getElementById('slider');
        ele.style.overflow = "hidden";
        ele.style.height   = "0";
    }
</script>