Come sincronizzare lo scorrimento in jQuery

June 24

Come sincronizzare lo scorrimento in jQuery


Molti sviluppatori utilizzano jQuery perché permette loro di inserire effetti visivi interessanti sulle loro pagine web. Può anche aiutare a mantenere i elementi div sincronizzati. Un div HTML è un contenitore utile che contiene altri oggetti in una pagina Web. Se si dispone di due elementi div, è possibile utilizzare jQuery per causare un div, il bambino, per scorrere quando si sposta la barra di scorrimento sul div genitore. Questa capacità può essere utile, ad esempio, la visualizzazione del testo in un div e immagini in un altro. Un utente può semplicemente scorrere il div che contiene il testo, e il div tenendo le immagini scorrono automaticamente.

istruzione

1 Notepad lancio o un editor HTML. Aprire un documento HTML, e aggiungere il seguente codice JavaScript per sezione head del documento:

<Script type = "text / javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js&quot;> </ script>

Questo codice aggiunge la libreria jQuery alla pagina Web.

2 Aggiungere questo codice alla sezione di script del documento:

var ParentObject = "My_Parent_Div";
var ChildObject = "My_Child_Div";

$ (Document) .ready (function ()
{

var parent = "#" + ParentObject;
var bambino = "#" + ChildObject;

$ (Genitore) .scroll (function () {

$ (Bambino) .scrollLeft ($ (genitore) .scrollLeft ());
$ (Bambino) .scrollTop ($ (genitore) .scrollTop ());

});
});

Sostituire "My_Parent_Div" con il nome del div che controllerà la barra di scorrimento di un altro div. Sostituire "My_Child_Div" con il nome del div div che il genitore controllare. Le funzioni di jQuery scrollLeft e scrollTop causano il div bambino di scorrimento quando la barra di scorrimento sulle mosse genitore div.

3 Salvare il documento e visualizzarlo in un browser. Fare clic su uno delle barre di scorrimento sul div genitore, e trascinare la barra di scorrimento. La barra di scorrimento sul div bambino si muove pure.

Consigli e avvertenze

  • Si ricorda che la funzione "pronto" mostrato nel codice imposta il comportamento di scorrimento ogni volta che la pagina Web carichi. Per disabilitare lo scorrimento automatico, commentare il codice aggiunto al documento pagina Web.