Styling barul de defilare cu javascript

De ce toate astea?

Tema deliciilor și dorințelor designerului este uneori dincolo de limitele binelui și răului. Dar acest lucru nu poate fi evitat, se întâmplă că ei doresc imposibilul. Dar eu cred că putem face toate (dacă nu contrazice legile fizicii), problema este complexitatea punerii în aplicare, și, respectiv, în ceea ce privește deciziile și ca rezultat - costul.

În web există o serie de lucruri care nu pot fi decorate în sensul clasic; Este imposibil, folosind doar CSS, să-și schimbe aspectul. Aceste elemente includ mai multe etichete ale formularului: selecții, casete de selectare, butoane radio. Mai devreme v-am spus deja cum să selectați un stilizat. Acum hai să vorbim despre cum să faci o bară de defilare frumoasă. Destul de sincer, urăsc sarcini care nu sunt evidente sau standarde, deoarece de la browser la browser, sau chiar de la versiune la browser sau OS, se pot comporta diferit. Suficient versuri, lucrăm.

Un pic de teorie

Emoție completă pe js nu-mi place, pentru că acest lucru este dificil și dacă js cade, atunci abilitatea de a defila blocul dispare complet. Undeva în urmă am învățat următoarea idee:

Styling barul de defilare cu javascript

Din punct de vedere tehnic, imi imaginez cum sa fac totul, si chiar odata scris chiar si toata prelucrarea in sine, dar in acest caz nu am vrut sa reinventez roata. După ce am căutat opțiunile de emulare de defilare, am găsit biblioteca baronei. M-am potrivit mai mult decât, cu excepția faptului că toate impachetările și blocurile de emulare trebuie inserate în html. Această versiune mi se părea un pic ciudat, deoarece există un plugin, aș dori să fac un minim de acțiuni, în mod ideal incita suficient să conectați pe bloc, care trebuie să fie stilizat și toate, deși el adaugă marcajul necesar. Plecând de la acest mesaj spiritual, sa decis să scrieți un mic pachet care să pregătească blocurile și să conducă emulația parolei.

De fapt, codul de înfășurare este următorul:

Și sunăm așa

Am încercat chiar un pic pentru a se potrivi cu ideologia BEM. Privind la codul imediat loveste ochiul ca functia check_size este numita de 2 ori la rand, de ce se face si de ce este? Și apoi, că bara personalizată de derulare se adaugă numai atunci când este cu adevărat necesar, este răspunsul la a doua întrebare și la prima întrebare răspunsul este: După ce sa decis că este necesar să se adauge o bară de defilare, începe procesul de adăugare a unui marcaj în De data aceasta, dimensiunile unităților exterioare se pot schimba (cu mare probabilitate) și totul pare adecvat, începem procesul de inițializare de două ori.

Pentru a facilita implicarea în procesul de înțelegere, voi da aici un exemplu de stiluri ale unuia dintre proiectele noastre

Implementarea, desigur, este o cârjă, iar pentru dispozitivele mobile ar trebui să fie oprită, dar se pare că funcționează peste tot, astfel încât să o puteți folosi pentru sănătate. Apropo, există un mic exemplu aici. Foloseste-ti sanatatea =)

Cu începutul unui nou an de lucru;)