Comment faire pour contrôler les barres de défilement avec javascript

Depuis javascript est un langage côté client qui fonctionne sur le navigateur commun, il peut être utilisé pour afficher les pages Web interactives. javascript peut être utilisé pour contrôler les fonctions fenêtre de défilement d'une page web. En fait, il est possible de créer une fenêtre pop-up qui n'a pas de barres de défilement du tout en utilisant javascript. Pour javascript à offrir ce niveau d'interactivité cependant, il doit être lié à la fois les fichiers CSS et javascript.

Instructions

  1. 1

    Ouvrez votre application de éditeur HTML et de déclarer 2 divs dans le document intitulé "scrollbar" et "Scroll." Divs sont des balises qui définissent divisions logiques sur des pages Web dans un contenu de la page Web et peuvent être ajoutés de la même manière que des tables et des cellules de tableau sont ajoutés. Les éléments de la première barre de défilement sur la page HTML devrait ressembler à ceci:



    Contrôle des barres de défilement avec javascript<br/>

    ...



    ... placer votre contenu de défilement ici ...


    ...

    Placez le contenu de la page web dans les deux divs.

  2. 2

    Déclarez les fichiers CSS et javascript dans l'en-tête de la page HTML comme suit:


    ...

    ...

    Placez les éléments de la deuxième et autres barres de défilement sur la page HTML comme suit:

    ...



    ... placer votre contenu de défilement ici ...


    ...

  3. 3

    Créez le "Scroll.js" déposer et copier le code suivant dans le fichier:

    / nombre d'objets de défilement /
    document.No = 0
    GO

    var isOpera = (window.navigator.userAgent.indexOf ("Opéra") gt; -1)
    GO

    fonction ScrollLoad (Région, Content, SettingTracSize)
    {

    code var = "-scroller var "- + document.No + "- = new dw_scrollObj (salon, contenu, contenu, salon, document.No) - "-

    GO

    if (SettingTracSize)
    Code + = "-scroller "- + document.No + "-.setBarSize () - "-

    GO

    eval (code)

    GO

    makeMouseWheeleScrolling (Région)

    GO

    document.No ++



    GO
    }

    / /
    var mouseWheelTimer = 0
    GO

    fonction makeMouseWheeleScrolling (objName)
    {

    var obj = document.getElementById (objName)

    GO

    if (obj.addEventListener)
    {
    obj.addEventListener ("-DOMMouseScroll "-, roue, false)

    GO

    }
    obj.onmousewheel = roue

    GO
    }

    fonction moveUp (parent)
    {

    dw_scrollObj.initScroll (parent.id, "-up "-)

    GO

    clearInterval (mouseWheelTimer)

    GO

    mouseWheelTimer = setTimeout ("-mouseStop ('"- + parent.id + " - ') - "-, 200)

    GO
    }

    fonction moveDown (parent)
    {

    dw_scrollObj.initScroll (parent.id, "-bas "-)

    GO

    clearInterval (mouseWheelTimer)

    GO

    mouseWheelTimer = setTimeout ("-mouseStop ('"- + parent.id + " - ') - "-, 200)

    GO
    }

    fonctionner mouseStop (parentId)
    {

    dw_scrollObj.stopScroll (parentId)



    GO

    mouseWheelTimer = 0

    GO
    }

    / fonctions de la molette de souris pour faire défiler sur efect molette de la souris sur l'objet avec mon js scrollbar /
    poignée de fonction (delta, parent)
    {

    var s = delta + "-: "-

    GO

    si (delta lt; 0)
    {

    &# 9-&# 9-si (isOpera)
    &# 9- moveUp (parent) -&# 9-&# 9-
    &# 9-&# 9-else
    &# 9- moveDown (parent)
    GO

    }
    autre
    {

    &# 9-&# 9-si (isOpera)
    &# 9- moveDown (parent)
    GO
    &# 9-&# 9-else
    &# 9-&# 9-&# 9-moveUp (parent)
    GO

    }

    }

    roue de fonction (événement)
    {

    var delta = 0

    GO

    if (! événement) event = window.event

    GO

    if (event.wheelDelta)
    {
    delta = event.wheelDelta / 120-
    if (window.opera) delta = -delta

    GO

    }
    else if (event.detail)
    {
    delta = -event.detail / 3

    GO

    }
    si (delta)
    gérer (delta, ce)

    GO
    }
    //

  4. 4

    Assurer que tous vos fichiers sont enregistrés dans le même dossier et d'exécuter la page HTML à tester.

Conseils & Avertissements

  • Plus fonctionnalité peut être ajoutée comme le montre le site Web Designers Gondo (voir Ressources).
» » » » Comment faire pour contrôler les barres de défilement avec javascript