Capturarea derulării - articol pe

Pentru a lucra eficient cu defilați, trebuie să rezolvați următoarele sarcini:

  1. Prindeți parcurgerea evenimentului.
  2. Determinați direcția.
  3. Blocați procesarea prestabilită de către browser - derulând pagina.

// Funcție pentru adăugarea unui handler de evenimente






funcția addHandler # 40; obiect, eveniment, handler, useCapture # 41; # 123;
dacă # 40; obiect. addEventListener # 41; # 123;
obiect. addEventListener # 40; eveniment, handler, useCapture. useCapture. fals # 41; ;
# 125; altfel dacă # 40; obiect. attachEvent # 41; # 123;
obiect. attachEvent # 40; eveniment "pe" +, manipulator # 41; ;
# 125; alta alertă # 40; "Add handler nu este acceptat" # 41; ;
# 125;
// Add Handlers
/ * Gecko * /
AddHandler # 40; fereastră, "DOMMouseScroll". roată # 41; ;
/ * Opera * /
AddHandler # 40; fereastră, "rotița mouse-ului". roată # 41; ;
/ * IE * /
AddHandler # 40; document, "rotița mouse-ului". roată # 41; ;
// Handler de evenimente
funcție de roată # 40; eveniment # 41; # 123;
var delta; / / Direcție de derulare
// -1 - derulați în jos
// 1 - derulați în sus
eveniment = eveniment || fereastră. eveniment;
// Opera și IE lucrează cu proprietatea wheelDelta
dacă # 40; eveniment. wheelDelta # 41; # 123;
delta = eveniment. wheelDelta / 120;
// În Opera, valoarea wheelDelta este aceeași, dar cu semnul opus
dacă # 40; fereastră. operă # 41; delta = -delta;
// În implementarea Gecko, obținem proprietatea detaliilor






# 125; altfel dacă # 40; eveniment. detaliu # 41; # 123;
delta = -event. detalii / 3;
# 125;
// Dezactivați procesarea evenimentelor în browserul implicit
dacă # 40; eveniment. preventDefault # 41; eveniment. preventDefault # 40; # 41; ;
eveniment. returnValue = false;
delta retur;
# 125;

Faceți clic pe acest link pentru a activa exemplul și încercați să scanați pagina :-).

Cu o funcționare corectă, va fi afișată o alertă cu direcția derulării fără a derula pagina.

Este probabil sălbatic pentru a ridica un astfel de subiect vechi, dar, din păcate, în acea zi nu pot rezolva o problemă.
Esența este următoarea:
există o pagină lungă adaptivă sayta.V mijlocul foii este un bloc cu câteva paragrafe teksta.kogda vom ajunge la acest bloc pentru a bloca DEFAULT de derulare și a început să se retragă punctele una (în sensul primului va apărea în primul rând, atunci acesta va conduce până la al doilea, etc.)
problema reală este că exemplul dvs. bulleye numai evenimentele mouse-ului, și cum să repete un truc similare de pe un dispozitiv de atingere?
Voi fi extrem de recunoscător pentru orice sfaturi sau sfaturi.
ZY Cred că pentru a face degradarea codului pentru dispozitivele cu atingere, dar numai în legătură cu apariția de touch-calculatoare (în sensul de figura ghici, cu mouse-ul va sta pe site-ul sau de a conduce un deget) strategie de comportament nu poate pune în cap.

Pe touch-dispozitivele nu a fost testat, dar se pare că există o opțiune mult mai ușor: Puneți unitatea cu o înălțime punctele fixe textului (dacă nu este necesar), și preaplin: parcurgere. Atunci va fi exact așa cum scrieți:

Când vom ajunge la acest bloc pentru a bloca DEFAULT de derulare și să înceapă să se retragă unul alineatele


De exemplu, încercați acest cod:








(în schimb, div sunt paragrafe de text lung)




Functioneaza asa cum vrei?

Ceea ce nu ne omorâ ne face să fim dezactivați.







Trimiteți-le prietenilor: