• Käännös

Vieritystehosteet ovat olleet käytössä verkossa jo pitkään, ja vaikka valittavana on jo monia laajennuksia, vain muutama niistä on niin kevyitä ja yksinkertaisia ​​kuin monet suunnittelijat ja kehittäjät vaativat. Suurin osa näkemistäni laajennuksista yrittää tehdä liikaa, mikä vaikeuttaa niiden sisällyttämistä projekteihin.

Ei niin kauan sitten Apple esitteli iPhone 5S:n ja esittelysivuston, jossa sivu oli jaettu osiin ja jokaisessa osiossa kuvattiin yksi tuotteen ominaisuuksista. Minusta se oli loistava tapa esitellä tuote ilman, että keskeisiä tietoja puuttuisi.

Lähdin etsimään sopivaa laajennusta, enkä yllätyksekseni löytänyt sellaista. Näin sivutuslaajennus syntyi.

Sivutuslaajennus.

JQuery-pohjainen laajennus, jonka avulla voit luoda moniosaisen sivuasettelun minimaalisella merkinnällä.

Kerron sinulle kuinka se luotiin, ideasta suunnitteluun, testaamiseen ja ilmaisen koodin lähettämiseen.

Huomautus: Olin jo tietoinen kiistasta ennen laajennuksen rakentamista siitä, pitäisikö komentosarjojen muuttaa selainten alkuperäistä vierityskäyttäytymistä – tämä voi olla käyttäjille hämmentävää. Siksi yritin vähentää tavanomaisen käyttäytymisen muutoksen negatiivista vaikutusta. Plugin-asetuksissa voit määrittää näytön koot, joilla laajennus palaa normaaliin näytön vieritykseen. Näin ollen voit ylläpitää sivuston nopeutta pienitehoisilla laitteilla, kuten älypuhelimilla ja tableteilla. Lisäksi voit asettaa animaation keston siirtyessäsi osioiden välillä.

Miksi tämä kaikki?

Kuten mainitsin, useimmat valmiiksi rakennetut lisäosat sisälsivät paljon valinnaisia ​​toimintoja mikä esti integraatiota. Tämän laajennuksen pitäisi olla:

Helppokäyttöinen
- helppo integroida
- vaativat minimaalisen merkinnän
- suorittaa yhden toiminnon, mutta hyvin

1. Piirustukset

Aloin suunnitella laajennusta yleisestä erityiseen. Sen pitäisi selata osia. Tätä varten sinun on poistettava selaimesta normaali vieritys, samalla kun osiot näytetään yksitellen ja tarvittaessa siirretään sivua eteenpäin.

Voit kuvitella kaiken mielessäsi tai tehdä luonnoksia.

Jaetaan konsepti pieniin tehtäviin ja ratkaistaan ​​jokainen peräkkäin.

1. Valmistele osien asettelu
Poista normaali vieritys käytöstä käyttämällä ylivuotoa: piilotettu kehoon. Järjestä osat haluttuun järjestykseen, laske ja mukauta tarvittavat tiedot ja luokat.

2. Asenna manuaalinen vieritysliipaisin
Otamme liipaisimen kiinni jQueryn kautta, määritämme vierityssuunnan, siirrämme asettelua CSS:n avulla.

3. Lisää ominaisuuksia
Lisätäänpä mukautuvuus, sykli, tuki kosketusnäyttöjen vieritykseen, sivutus jne.

4. Tarkastetaan eri selaimia.
Tarkistetaan Chrome-selaimet Safari, Firefox, Internet Explorer 10 ja suosituimmat käyttöjärjestelmät Windows, Mac OS X, iOS ja Android 4.0+.

5. Aseta laajennus saataville arkistossa
Luodaan arkisto, kirjoitetaan ohjeet laajennuksen käyttöön

6. Laajenna tukea.
Tutkitaan muita tapoja lisätä laajennustukea.

2. Perustuksen rakentaminen

Laajennuksen suunnittelun jälkeen aloin rakentaa pohjaa tälle mallille:

Function($) ( var defaults = ( sectionContainer: "section", … ); $.fn.onepage_scroll = toiminto(vaihtoehdot) ( var settings = $.extend((), oletukset, asetukset); … ) )($)

Malli alkaa !function($) ( … )($) -moduulilla, joka asettaa globaalin jQuery-muuttujan paikallinen alue- tämä auttaa vähentämään kuormitusta ja ehkäisemään ristiriitoja muiden kirjastojen kanssa.

Oletusmuuttuja sisältää oletusasetukset.

$.fn.onepage_scroll on päätoiminto, joka alustaa kaiken. Jos olet tekemässä omaa laajennusta, älä unohda kirjoittaa toinen nimi onepage_scrollin sijaan.

Voit estää tavallisen vierityksen määrittämällä overflow: hidden -ominaisuuden body-tunnisteeseen
kyseiselle laajennukselle ominaisen luokan nimen kautta. On tärkeää käyttää yksilöllisiä tyylinimiä, jotta vältetään ristiriidat olemassa olevien kanssa. Käytän yleensä lyhennettä laajennuksen nimestä ja sitten väliviivan jälkeen tyylin nimeä, esimerkiksi: .onepage-wrapper.

Perustus on luotu, siirrytään ensimmäiseen toimintoon.

3. Valmistele layout ja järjestele osat

Aluksi menin väärään suuntaan. Ajattelin laittaa kaikki osat järjestykseen ja käydä ne läpi silmukassa. Mitä sain ensin:

var sections = $(settings.sectionContainer); var topPos = 0; $.each(sections, function(i) ( $(this).css(( position: "absolute", top: topPos + "%" )).addClass("ops-section").attr("data-index ", i+1); topPos = topPos + 100; ));

Silmukka kiertää kaikkien valitsimien läpi (sectionContainer on määritetty oletusmuuttujaosiossa), määrittää sijainnin: absoluuttinen ja antaa jokaiselle seuraavalle osalle oikean yläkohdan, jotta ne eivät mene päällekkäin.

Ylin sijainti tallennetaan topPosiin. Aloitamme alusta ja lisäämme jokaisella syklillä. Jotta jokainen osio kattaisi koko sivun, asetan niiden korkeudeksi 100 % ja lisään 100 topPosiin.

Kehittäminen ja todentaminen kesti pari tuntia, mutta seuraavassa vaiheessa tajusin, että tämä kaikki ei ollut välttämätöntä.

4. Manuaalinen laukaisu ja sivun muuntaminen

Voisi luulla, että seuraava askel on siirtää jokainen osa uuteen asentoon, kun vierityslaukaisin laukeaa... Mutta on olemassa parempikin tapa. Sen sijaan, että siirtäisin jokaista osiota silmukassa, laitan ne kaikki yhteen säiliöön ja siirrän sen CSS3:n translate3d-funktiolla. Tämä toiminto tukee prosenttiosuuksia, voimme siirtää osia niin, että ne ovat tarkalleen ikkunassa ilman, että kaikkea lasketaan uudelleen. Se helpottaa myös nopeuden ja muiden animaatioparametrien hallintaa.

Ensimmäinen ratkaisu ei aina ole tehokkain, joten muista jättää aikaa kokeilulle.

Nyt on vain määritettävä vierityssuunta ja siirrettävä säiliö oikeaan suuntaan.

Funktio init_scroll(event, delta) ( var deltaOfInterest = delta, timeNow = new Date(). getTime(), quietPeriod = 500; // Peruuta vieritys, jos animaatio on parhaillaan tai hiljaisen ajanjakson sisällä if(timeNow - lastAnimation< quietPeriod + settings.animationTime) { event.preventDefault(); return; } if (deltaOfInterest < 0) { el.moveDown() } else { el.moveUp() } lastAnimation = timeNow; } $(document).bind("mousewheel DOMMouseScroll", function(event) { event.preventDefault(); var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; init_scroll(event, delta); });

Ensin kytketään toiminto hiiren pyörän tapahtumaan (DOMMouseScroll Firefoxissa), sitten voimme siepata tiedot ja määrittää suunnan. Upotamme init_scroll-käsittelyyn, joka vastaanottaa wheelData tätä varten.

SISÄÄN ihanteellinen maailma riittäisi laskea pyörätiedon muutos. Kun animoitat sarjoja, sinun on kuitenkin rakennettava tarkistus, jotta laukaisutapahtuma ei toistu (muuten kuva menee päällekkäin animaation aikana). On mahdollista käyttää setIntervalia kutsumaan jokaista animaatiota vuorotellen, mutta tämä ei takaa tarkkuutta ja luotettavuutta, koska jokainen selain käsittelee sitä eri tavalla. Esimerkiksi Chromessa ja Firefoxissa setInterval hidastuu passiivisilla välilehdillä, minkä seurauksena toiminnot eivät toimi ajoissa. Tämän seurauksena päädyin käyttämään funktiota, joka palauttaa nykyisen ajan.

Muut timeNow = new Date().getTime(), hiljainenAika = 500; …if(timeNow - lastAnimation< quietPeriod + settings.animationTime) { event.preventDefault(); return; } … lastAnimation = timeNow;

Tässä edellisestä koodista lainaamassani katkelmassa tallennan nykyisen ajan timeNow-palveluun, jotta voin myöhemmin tarkistaa, onko animaatio kestänyt yli 500 ms. Jos ei, muunnos ei tapahdu eikä animaatio mene päällekkäin. Työskennellä jonkun kanssa nykyinen aika luotettavampi, koska se on kaikille sama.

If(deltaOfInterest< 0) { el.moveDown() } else { el.moveUp() }

MoveUp- ja moveDown-funktiot muuttavat asettelun attribuutteja vastaamaan niitä Nykyinen tila sivusto. Jokainen niistä kutsuu lopullista muunnosmenetelmää työn lopussa siirtääkseen seuraavan osan kuvaporttiin.

$.fn.transformPage = funktio(asetukset, pos, indeksi) ( … $(this).css(( "-webkit-transform": (settings.direction == "horizontal") ? "translate3d(" + pos + " %, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "-webkit-transition": "all " + settings.animationTime + "ms " + settings.easing, "-moz" -transform": (settings.direction == "horisontaalinen") ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "-moz" -transition": "all " + settings.animationTime + "ms " + settings.easing, "-ms-transform": (settings.direction == "horizontal") ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "-ms-transition": "all " + settings.animationTime + "ms " + settings.easing, "transform": (asetukset. suunta == "horisontaalinen") ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "transition": "kaikki " + asetukset. animationTime + "ms" + settings.easing )); ... )

Tämä on muunnosmenetelmä, joka siirtää osia. Tein ne javascriptissä erillisten tyylien asettamisen sijaan, jotta kehittäjät voisivat muuttaa itse pluginin asetuksia (lähinnä animaation nopeutta ja kiihtyvyyttä), eikä tarvinnut selata tyylitiedostoa etsiessään asetuksia. Lisäksi muunnosprosentti on vielä laskettava uudelleen, joten javascript on välttämätön.

5. Lisäominaisuudet

Aluksi en halunnut lisätä mitään, mutta sain niin paljon palautetta GitHub-yhteisöltä, että päätin asteittain parantaa laajennusta. Julkaisin version 1.2.1, joka lisää paljon takaisinsoittoja ja silmukoita, ja vaikein asia on mukautuvuus.

En tehnyt laajennusta alun perin mobiilialustoja silmällä pitäen (mitä pahoittelen). Sen sijaan meidän piti seurata ja laskea kosketusnäytön tapahtumia uudelleen muotoon, joka soveltuu käytettäväksi init_scrollissa. Tämä ei toimi hyvin kaikissa selaimissa, joten jouduimme rakentamaan takaisin palautusominaisuuden - kun selain palaa normaaliin vieritykseen, kun se saavuttaa tietyn ikkunan leveyden.

Var defaults = ( responsiveFallback: false ... ); funktio responsive() ( if ($(window).width()< settings.responsiveFallback) { $("body").addClass("disabled-onepage-scroll"); $(document).unbind("mousewheel DOMMouseScroll"); el.swipeEvents().unbind("swipeDown swipeUp"); } else { if($("body").hasClass("disabled-onepage-scroll")) { $("body").removeClass("disabled-onepage-scroll"); $("html, body, .wrapper").animate({ scrollTop: 0 }, "fast"); } el.swipeEvents().bind("swipeDown", function(event) { if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); el.moveUp(); }).bind("swipeUp", function(event){ if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); el.moveDown(); }); $(document).bind("mousewheel DOMMouseScroll", function(event) { event.preventDefault(); var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; init_scroll(event, delta); }); } }

Määritellään oletusmuuttuja. Käytämme responsiveFallbackia määrittääksemme, milloin laajennuksen pitäisi palautua. Tämä koodi määrittää selaimen leveyden. Jos leveys vähemmän arvoa responsiveFallbackista toiminto poistaa kaikki tapahtumat, siirtää sivun alkuun ja antaa sinun vierittää sitä tavalliseen tapaan. Jos leveys ylittää arvon, laajennus tarkistaa, onko deaktivoitu-onepage-scroll-luokka olemassa nähdäkseen, onko se alustettu. Jos ei, se alustetaan uudelleen.

Ratkaisu ei ole täydellinen, mutta antaa kehittäjille ja suunnittelijoille mahdollisuuden valita, miten sivustonsa näytetään mobiilialusta, sen sijaan, että hylkäsivät nämä alustat kokonaan.

6. Testaus eri selaimissa.

Testaus on tärkeä osa kehitystä, ennen kuin liitännäinen julkaistaan, on varmistettava, että se toimii useimmilla koneilla. Kehitän aina Chromessa - ensinnäkin rakastan sen kehittäjätyökaluja, ja toiseksi tiedän, että jos laajennus toimii Chromessa, se toimii todennäköisesti Safarissa ja Operassa.

yleensä käytän macBook air kehitystä varten, ja kotona minulla on PC testattavana. Kun laajennus toimii Chromessa, testaan ​​sitä manuaalisesti Safarissa, Operassa ja lopuksi Firefoxissa Mac OS X:ssä ja sitten Chromessa, Firefoxissa ja Internet Explorer 10:ssä Windowsissa.

Ei siinä kaikki mahdolliset selaimet, mutta avoin lähdekoodi on hyvä, koska muut kehittäjät voivat testata ja korjata vikoja itse - tämä on sen merkitys. Et voi tehdä heti täydellistä tuotetta, mutta aseta ponnahduslauta aloittamiselle.

Älä unohda testata laajennuksiasi mobiililaitteet.

Testauksen helpottamiseksi, kun laajennus on valmis, luon esittelysivun, joka näyttää kaikki sen ominaisuudet, ja lataan sen sivustolleni. On virheitä, joita ei voida havaita paikallisesti, mutta jotka selviävät, kun työskentelet todellisessa työpaikassa. Kun esittelysivu toimii, aloitan testaamisen mobiililaitteilla.

7. Lisäosan asentaminen avoimeen lähdekoodiin

Viimeinen vaihe on jakaa laajennus GitHubissa. Tätä varten sinun on luotava tili sinne, määritettävä Git ja luotava uusi arkisto. Sitten kloonataan se paikallinen kone- Tämä luo hakemiston, jossa on laajennuksen nimi. Kopioi laajennus sinne ja määritä rakenne.

Arkiston rakenne

Aseta haluamallasi tavalla. Pidän tästä:

Demohakemisto sisältää toimivat demot ja kaikki tarvittavat resurssit
- laajennuksen tavallinen ja pakattu versio ovat juurissa
- CSS ja testiresurssit, kuten kuvat (tarvittaessa), ovat juurissa
- Readme-tiedosto juurissa

readme -rakenne

Tärkeä askel on kirjoittaminen selkeät ohjeet avoimen lähdekoodin yhteisölle. Yleensä kirjoitan ne readme-tiedostoon, mutta monimutkaisissa tapauksissa saatetaan tarvita wikisivua. Kuinka kirjoitan readmi:n:

1. Esittely
Selitän laajennuksen tarkoituksen, annan kuvan ja linkin demoon.
2. Vaatimukset ja yhteensopivuus.
On parempi siirtää tämä osio korkeammalle, jotta on heti selvää, voiko henkilö käyttää laajennusta.
3. Käytön perusperiaatteet
Vaiheittaiset ohjeet osoitteesta jQuery-yhteydet, joka päättyy HTML-merkintään ja funktiokutsuun. Asetukset on myös kuvattu.
4. Kehittynyt käyttö.
Monimutkaisempia ohjeita julkisia menetelmiä, takaisinsoittoja ja muuta hyödyllistä tietoa.
5. Muut resurssit
Linkkejä opetusohjelmaan, kiitos jne.

8 Tuen laajentaminen

Yleisesti ottaen olisi mahdollista pärjätä ilman jQueryä, mutta minulla oli kiire laittaa se avoimeen lähdekoodiin, joten päätin vähentää kehitysaikaa ja luottaa jQueryn valmiisiin toimintoihin.

Mutta tyhjentääkseni omatuntoni, suunnittelin laajennuksen uudelleen puhtaalla javascriptillä (saatavilla on myös Zepto-tuella varustettu versio). Puhtaalla JS:llä ei tarvitse sisällyttää jQueryä, kaikki toimii heti.

Korjatakseni ja yksinomaan Smashing Magazinen lukijoita varten olen rakentanut uudelleen Yksi sivu Vieritä käyttämällä puhdasta JavaScriptiä (myös Zepto-versio on saatavilla). Puhtaalla JavaScript-versiolla sinun ei enää tarvitse sisällyttää jQueryä. Plugin toimii heti paketista otettuna.

Puhdas JS ja Zepto versio

Plugin uudelleenkäsittely puhdas JavaScript

Tällainen käsittely voi tuntua vaikealta tehtävältä, mutta tämä on vain aluksi. Vaikeinta on olla tekemättä virheitä matematiikan kanssa. Koska Olen jo tehnyt sen, kehitystä aputoiminnot jQuerysta eroon pääseminen kesti vain muutaman tunnin.

Plugin perustuu CSS3:een, joten oli vain kysymys jQuery-kutsujen korvaamisesta vastaavilla omillamme. Samalla järjestin käsikirjoituksen rakenteen uudelleen:

Muuttujien oletusarvot
Kaikki sama kuin sisällä aiempi versio
- alustustoiminto
Valmistelee ja laatii asettelun ja alustuksen sille, mitä tapahtuu, kun onePageScroll-toimintoa kutsutaan. Tässä ovat kaikki menettelyt, jotka määrittävät luokkien nimiä, attribuutteja ja paikannustyylejä.
- Yksityiset menetelmät
Kaikki sisäiset menetelmät plugin - vieritystapahtumat, sivun muunnos, mukautuva palautus ja vierityksen seuranta.
- julkiset menetelmät
Kaikki kehittäjämenetelmät: moveDown(), moveUp() ja moveTo()
- apumenetelmiä
Kaikki, mikä ohittaa jQuery-kutsut.

Tapasi pariskunnan epämiellyttäviä hetkiä on erillinen funktio, joka vain lisää tai poistaa tyylin nimen tai käytä document.querySelectoria $ sijaan. Mutta lopulta saimme paremmin jäsennellyn laajennuksen.

Zepton laajennuksen uudelleenrakentaminen

Päätin tukea Zeptoa, vaikka se on suunniteltu vain suurimmalle osalle nykyaikaiset selaimet(IE10+), koska se on nopeampi ja tehokkaampi kuin jQuery 2.0+ ja siinä on joustavampi API. Zpeto on 4 kertaa pienempi kuin jQuery, mikä vaikuttaa sivun latausnopeuteen. Koska ihmiset käyttävät älypuhelimia useammin, Zepto on paras vaihtoehto.

Laajennuksen muuntaminen jQuerysta Zeptoon on helpompaa, koska niillä on samanlaiset API:t. Melkein kaikki on sama paitsi animaatio. Koska Zepton $.fn.animate()-funktiossa on CSS3-animaatiotuki ja animationEnd-soittotuki, seuraava osa on:

$(this).css(( "-webkit-transform": "translate3d(0, " + pos + "%, 0)", "-webkit-transition": "-webkit-transform " + settings.animationTime + " ms " + settings.easing, "-moz-transform": "translate3d(0, " + pos + "%, 0)", "-moz-transition": "-moz-transform" + settings.animationTime + "ms " + settings.easing, "-ms-transform": "translate3d(0, " + pos + "%, 0)", "-ms-transition": "-ms-transform" + settings.animationTime + "ms" + settings.easing, "transform": "translate3d(0, " + pos + "%, 0)", "transition": "transform " + settings.animationTime + "ms" + settings.easing )); $(this).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd siirtymäloppu", function(e) ( if (typeof settings.afterMove == "function") settings.afterMove(index, next_el); ));

Voidaan korvata tällä koodilla:

$(this).animate(( translate3d: "0, " + pos + "%, 0" ), settings.animationTime, settings.easing, function() ( if (typeof settings.afterMove == "function") asetukset. afterMove(indeksi, seuraava_el); )); )

Zepton avulla voit animoida ilman, että määrität kaikkia tyylejä tai määrität takaisinsoittoja itse.

Ja miksi vaivautua sen kanssa?

Mitä enemmän ihmiset käyttävät jQueryä, se muuttuu monimutkaisemmaksi ja joskus hitaammaksi. Jos tuet muita kehyksiä, laajennuksesi on suositumpi.
Uudelleentyöskentely alusta alkaen auttaa sinua myös tekemään parempia laajennuksia tulevaisuudessa. jQuery ja muut kirjastot ovat erittäin anteeksiantavia pieniä virheitä, kuten pilkkujen puuttumista kohtaan - seurauksena et välitä työsi laadusta. Ilman näitä puhtaita JavaScript-hemmottelua minulla oli parempi käsitys siitä, miten laajennus toimii - mikä toimii, mikä vaikuttaa suorituskykyyn ja mitä voidaan parantaa.

Vaikka jQueryn kaltaiset kirjastot ovat helpottaneet elämäämme, niiden käyttö ei ole eniten tehokas menetelmä tavoitteen saavuttaminen. Jotkut laajennukset voivat tehdä tämän.

Johtopäätös.

No, tässä on koko One Page Scroll -laajennuksen luontiprosessi. Virheitä oli, mutta opin niistä kehityksen aikana. Jos kehittäisin sitä tänään, keskittyisin mobiililaitteisiin ja lisäisin koodiin kommentteja.

Ilman GitHubin, StackOverflown ja Smashing Magazinen kaltaisten yhteisöjen tukea en olisi voinut tehdä laajennusta niin nopeasti. Nämä yhteisöt ovat auttaneet minua paljon työssäni, minkä vuoksi annan laajennukset kaikkien saataville ilmaiseksi. Tämä on minun tapani maksaa takaisin upeasta tuesta.

Tässä lyhyessä artikkelissa haluan näyttää tavan määrittää hiiren rullan vierityssuunta. Laajuus ei ehkä ole niin laaja, mutta olen itse törmännyt useammin kuin kerran, missä se on ollut tarpeellista. Esimerkiksi luoda yksi "parallaksiefekti", jossa sivua ei itse asiassa pitäisi rullata, ja vaikutus syntyi vain keskittymällä siihen, kääntääkö käyttäjä hiiren rullaa ja mihin suuntaan. On mahdollista, että löydät projekteillesi sovellusta, jos et nyt, niin tulevaisuudessa.

Funktio addEvent(element, tyyppi, käsittelijä)( if(element.addEventListener)( elem.addEventListener(type, käsittelijä, false); ) else ( elem.attachEvent("on"+type, käsittelijä); ) return false; ) funktio scrollDirection()( var weelEvt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "hiiren pyörä", el = document.body; addEvent(el, weelEvt, function(e)( var evt = e .originalEvent ? e.originalEvent: e, delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta console.log("Scroll " + (delta > 0 ? "ylös" : "alas")); )); ) // Lopeta asiakirjan lataustapahtumakäsittelijä - DOM-Ready addEvent(window, "load", scrollDirection); // Jos kyseessä on jQuery, kutsu funktio DOM:n latauksen jälkeen /*$(function()( scrollDirection(); ));*/

Jotain erityistä maalattavaa, en näe järkeä. Ainoa asia, joka voidaan yksinkertaisesti huomioida, on se, että sisään Tämä tapaus"erityinen" FireFox, sen epästandarditapahtuma "DOMMouseScroll".
Paremman ymmärryksen ja käsityksen vuoksi päätin tehdä yhden esimerkin, jossa oletetaan seuraava tehtävä: jokaisen käyttäjän vierittäessä hänen on päästävä selvästi sivun seuraavaan / edelliseen osioon, ohittamatta sitä, vaikka hän vieritisi intensiivisesti. Samalla lataamme vastaavan sisällön nykyiseen lohkoon. Rakennetaan tämä HTML ja CSS:

* ( marginaali: 0; täyttö: 0; ) #grid li ( listatyyli: ei mitään; korkeus: 300px; reunus-ala: 1px pisteviiva #333; ) #fake (korkeus: 5000px;) /* juuri sinne oli ehdottomasti vierityspalkki */

Jatketaan JS:ään. Tässä tehtävämme on peruuttaa normaali käyttäytyminen hiiren vieritystapahtumassa ( pohjimmiltaan - estää käyttäjää vierittämästä sivua manuaalisesti), laske pyörän suunnasta riippuen seuraava tai edellinen lohko, vieritä animoidusti tähän lohkoon ja lataa siihen tarvittava sisältö.

$(function()( var lippu = false, // tarvitaan estämään toiminnot animaation aikana bn = 0, // nykyinen lohkoindeksi lohkot = $("#grid li"), // kaikki lohkot cnt = lohkot .length, / / lohkojen lukumäärä mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "hiiren pyörä"; // pyörän vieritystapahtuma blocks.eq(0).load("loadblocks. html #b0") ; // lataa sisältö välittömästi ensimmäiseen lohkoon // funktio määrittääksesi pyörän vieritysfunktion suunnan getDelta(e)( var evt = e || window.event; evt = evt.originalEvent ? evt.originalEvent: evt; return delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta; ) // sieppaa vieritystapahtuma $(document).on(mousewheelevt+".my_wheel", function(e)( e.preventDefault(); / / peruuttaa normaalin toiminnan (sivu ei rullaa) if(flag) return false; // jos lippu == tosi, niin Tämä hetki animaatio tapahtuu if(getDelta(e) > 0)( if(bn<= 0) return false; // если дошли до первого блока, то отменяем lisätoimia--bn; // jos lohko ei ole ensimmäinen, niin laske edellisen lohkon indeksi // jos lohko ei ole viimeinen, niin lasketaan seuraavan lohkon indeksi ) lippu = true; // aseta lippu osoittamaan, että animaatio on alkanut $("html, body").finish().animate(( scrollTop: blocks.eq(bn).offset().top // vieritä sivua lohkoon laskettu indeksillä ) , 1000, function()( blocks.eq(bn).load("loadblocks.html #b" + bn); // lataa sisältö lohkolipulle = false; // poista lippu, mikä osoittaa että animaatio on ohi )); )); ));

Maalasin kaiken kommenteissa, mutta on vielä selvitettävä, mistä tiedot ladataan. Menetelmässä ladata(), on mahdollista paitsi määrittää ladattava asiakirja, myös määrittää, mitä elementtiä tarvitsemme. Esimerkissä käytin tavallista html-dokumenttia, jossa on useita elementtejä ( lohkojemme lukumäärän mukaan) on tunnukset "b0" - "b6". Saatuamme nykyisen lohkon indeksin lataamme elementin vastaavalla tunnuksella.

Kokeile, kokeile ja mikä tärkeintä, muista, että jotkin asiat, joita et ehkä tarvitse tänään, voivat auttaa paljon huomenna. Ja jos sinulla on poikkeuksellisia kysymyksiä tai tehtäviä, kirjoita ne tähän säikeeseen tai osioon "

Miten tämän päivän temppu liittyy sivustoomme? Ensi silmäyksellä ei yhtään. Mutta jos Macissasi Käynnistysosio Camp elää Windowsissa, niin olet todennäköisesti jo huomannut, että Microsoft ei aio muuttaa hiiren ja ohjauslevyn vierityksen suuntaa eikä aio tehdä. Tästä johtuen käy ilmi, että Mac OS X:ssä ikkunoiden sisältö seuraa sormen liikettä (eli taaksepäin vieritys), ja Windowsissa liikutat liukusäädintä näytöllä ja itse sisältö siirtyy toiseen suuntaan. tapa.

Yleensä, jos et voi vaihtaa yhdestä lähestymistavasta hiiren ohjaamiseen toiseen, on aika siirtyä päättäväiseen toimintaan. On olemassa kaksi tapaa (vaihtoehto Windowsin asennuksen poistaminen ja sen siirto virtuaalikone ei oteta huomioon):

• poista takaisin vieritys käytöstä Lionissa tai vuorileijona . Tämä tehdään järjestelmäasetuksissa "Hiiri"- ja "Ohjauslevy"-kaukosäätimellä.
• ota käyttöön käänteinen vieritys ikkunoissa. Kummallista kyllä, järjestelmän rekisterissä on parametri tätä varten, mutta sen löytäminen on erillinen seikkailu.

Koska emme etsi helppoja tapoja, puhumme tänään toisesta vaihtoehdosta - käänteisen vierityksen aktivointi Windowsissa.

Aloitaksesi sinun on päästävä esimerkiksi sisään, tämä voidaan tehdä Ohjauspaneelin kautta. Katso Dispatcherissa Hiiret ja muut osoitinlaitteet -osioon:

Valitse hiiri laiteluettelosta tuplaklikkaus. Siirry "Tiedot" -välilehteen, avattavassa luettelossa tarvitset kohteen "Laitteistotunnus":

Huomaa ensimmäinen rivi, joka alkaa kirjaimilla VID (esimerkiksi VID_203A&PID_FFFC&REV_0100&MI_01). Muista tämä yhdistelmä.

Paina näppäimistöllä Command + R, kirjoita avautuvaan ikkunaan regedit ja paina Enter. Editori avautuu Windowsin rekisteri. Valitse haara vasemmalta HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Enum\HID. Näet luettelon hiiristä ja ohjauslevyistä, jotka on merkitty VID-, PID- ja MI-yhdistelmillä. Sinun on tunnistettava mukautettu laite tästä:

Laitteen sisältä löytyy vielä muutama kansio. Jokaisessa niistä on mentävä Device Parameters -kansioon ja muutettava parametrin arvoa FlipFlopWheel 0 - 1. Uudelleenkäynnistyksen jälkeen käänteinen vieritys toimii Windowsissa.