Hoe te Scrollbars Control met Javascript

De Scroll knop het wiel scrollen door Evan Meyer uit Fotolia.com

Omdat JavaScript is een client-side taal die op de gemeenschappelijke browser draait, kan het worden gebruikt om interactieve webpagina's weer te geven.JavaScript kan worden gebruikt window scrollbar gebruik van een webpagina bepalen.In feite is het mogelijk om een ​​pop-up venster dat er geen schuifbalken is helemaal door het gebruik van JavaScript te creëren.Om Javascript om deze mate van interactiviteit echter te bieden, het moet worden gekoppeld aan zowel CSS en JavaScript-bestanden.

instructies

  1. Open uw HTML-editor toepassing en verklaren 2 divs in het document genaamd "scrollbar" en \ "Bladeren." Divszijn tags die logische divisies op webpagina's te definiëren binnen een inhoud van webpagina en kan op dezelfde manier als tabellen en tabel cellen worden toegevoegd De elementen van de eerste scrollbar op de HTML-pagina ziet er als volgt worden toegevoegd:.

    & lt; html & gt;
    & lt; head & gt;
    & lt; title & gt; Controlling Scrollbars JavaScript & lt; / tegel & gt;
    & lt; / head & gt;
    & lt; body & gt;
    ...
    & lt; div id = \ "scrollholder \" class = \ "scrollholder \"& gt;
    & lt; div id = \" scroll \ "class = \" scroll \ "& gt;
    ... plaats uw scrollen inhoud hier ...
    & lt; / div & gt;
    & lt; / div & gt;
    & lt; script type = \ "text / javascript \" & gt;
    & lt;! -
    ScrollLoad (\ "scrollholder \", \ "scroll \", true)
    GO
    // - & gt;
    & lt; / script & gt;
    ...
    & lt; / body & gt;

    Plaats de inhoud van webpagina's in de 2 divs.

  2. Verklaar de CSS en JavaScript-bestanden in de header van de HTML-pagina als volgt:

    & lt; head & gt;
    ...
    & lt; link rel = \ "stylesheet \" type = \ "text / css \" href = \ "scroll.css \" mce_href = \ "scroll.css \" media = \ "scherm, projectie \"/ & gt;
    & lt; script type = \ "text / javascript \" language = \ "JavaScript \" src = \ "scroll.js \" mce_src = \ "scroll.js \" & gt; & lt; / script & gt;
    ...
    & lt; / head & gt;

    Plaats de elementen van de tweede en andere schuifbalken op de HTML-pagina als volgt:

    ...
    & lt; div id = \ "scrollholder2 \" class = \ "scrollholder \" & gt;
    & lt; div id = \ "scroll2 \" class = \ "scroll \" & gt;
    ... plaats uw scrollen inhoud hier ...
    & lt; / div & gt;
    & lt; / div & gt;
    & lt; script type = \ "text / javascript \" & gt;
    & lt;! -
    ScrollLoad (\ "scrollholder2 \", \ "scroll2 \", false)
    GO
    // - & gt;
    & lt; / script & gt;
    ...

  3. Maak de "Scroll.js" bestand en kopieer de volgende code in het bestand:

    / aantal scrollen voorwerpen /
    document.No = 0
    GO

    var isOpera = (venster.navigator.userAgent.indexOf (\ "Opera \") & gt; -1)
    GO

    functie ScrollLoad (Area, Content, SettingTracSize)

    {var code = \ & amp; quot; var scroller \ & amp; quot;+ Document.No + \ & amp; quot;= New dw_scrollObj (Area, inhoud, inhoud, Area, document.No); \ & amp; quot;

    GO

    if (SettingTracSize)
    code + = \ & amp; quot; scroller \ & amp; quot;+ Document.No + \ & amp; quot; .setBarSize (); \ & amp; quot;

    GO

    eval (code)

    GO

    makeMouseWheeleScrolling (Ruimte)

    GO

    document.No ++

    GO
    }

    / & lt; Mouse wheele scrollen & gt; /
    var mouseWheelTimer = 0
    GO

    functie makeMouseWheeleScrolling (ObjName)

    {var obj = document.getElementById (ObjName)

    GO

    if (obj.addEventListener)
    {
    obj.addEventListener (\ & amp; quot; DOMMouseScroll\ & amp; quot ;, wiel, false)

    GO

    }
    obj.onmousewheel = wiel

    GO
    }

    functie moveUp (ouder)
    {

    dw_scrollObj.initScroll (parent.id, \ & amp; quot; up \ & amp; quot;)

    GO

    clearInterval (mouseWheelTimer)

    GO

    mouseWheelTimer = setTimeout (\ & amp; quot; mouseStop ('\ & amp; quot; + parent.id + \ & amp; quot;'); \ & amp; quot ;,200)

    GO
    }

    functie moveDown (ouder)
    {

    dw_scrollObj.initScroll (parent.id, \ & amp; quot; beneden \ & amp; quot;)

    GO

    clearInterval (mouseWheelTimer)

    GO

    mouseWheelTimer = setTimeout (\ & amp; quot; mouseStop ('\ & amp; quot;+ Parent.id + \ & amp; quot; '); \ & amp; quot ;, 200)

    GO
    }

    functie mouseStop (ParentID)
    {

    dw_scrollObj.stopScroll (ParentID)

    GO

    mouseWheelTimer = 0

    GO
    }

    / muiswiel functies op muiswiel efect te schuiven op object met mijn js scrollbar /
    functie handvat (delta, ouder)
    {

    var s = delta + \ & amp; quot ;: \ & amp; quot;

    GO

    als (delta & amp; lt; 0)

    {if (isOpera)
    moveUp (ouder);
    anders
    moveDown (ouder)
    GO

    }
    anders
    {

    if (isOpera)
    moveDown (ouder)
    GO
    anders
    moveUp (ouder)
    GO

    }

    }

    functie wiel (event)
    {

    (! event) var delta = 0

    GO

    als 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


    } if (delta)
    handvat (delta, dit)

    GO
    }
    / & lt; / muiswiel scrollen & gt; /

  4. Zorg ervoor dat al uw bestanden worden opgeslagen in dezelfde map en voer de HTML-pagina om te testen.

Tips & amp;Waarschuwingen

  • Meer functionaliteit kan worden toegevoegd, zoals blijkt uit de Gondo Web Designers website (zie bronnen).

Resources

  • Gondo Web Designers: JavaScript Scrollbar
  • Gondo Web Designers: JavaScript Scrollbar Code
62
0
2
Java Script Programmeren