Bloc cu scrollbar html. Div cu scroll

Bună prieteni. Astăzi vom vorbi despre derularea lină a site-ului. Adică, nu despre a face clic pe un buton sau pe un link, ci despre defilarea lină atunci când utilizați o roată sau un glisor.

Doar o scurtă notă, a trebuit doar să o implementez pe unul dintre site-uri și am decis să scriu despre asta pe blog în timp ce pregăteam un articol mai serios (widget de reducere), la cererea unuia dintre cititori. Artem, salutare. Nu am uitat!

Desigur, mulți oameni folosesc browsere care au deja derulare lină, mulți folosesc o extensie specială de browser, dar nu toate. Să obținem fluiditate pe majoritatea dispozitivelor care vă vor vizita site-ul.

Pentru a rezolva această problemă, am ales pluginul Malihu-custom-scrollbar-plugin, deoarece are multe capacități:

• Verticală și/sau dungă orizontală sul.
• Puls de defilare personalizabil.
• Defilare lină cu rotița mouse-ului.
• Defilare lină folosind glisorul.
• Suport pentru tastatură și derulare lină folosind săgeți sau PgUp/PgDn.
• Suport ecran tactil.
• Teme gata de utilizare.
• Personalizare manuală folosind CSS.
• Diferite opțiuni de afișare cu glisor.
• Abilitatea de a adăuga o defilare lină la diferite elemente de pe pagină care o au.

Desigur, pentru mulți această funcționalitate poate fi redundantă. Dacă doriți doar să ușurați derularea cu rotița, atunci la sfârșit ne vom uita la o soluție foarte simplă în aceste scopuri.

„Opriți, defilarea lină în diferite blocuri este bună, dar unde este derularea lină a site-ului pentru care am venit?” - tu spui. Calm. Vom face asta acum.

Întrucât soluția aleasă este un plugin jQuery, primul lucru pe care îl vom face este să conectăm jQuery în sine la site dacă nu îl aveți conectat.

Acum descărcați pluginul pentru derulare lină din linkul de mai sus și conectați 2 fișiere la site.

• jquery.mCustomScrollbar.concat.min.js
• jquery.mCustomScrollbar.min.css

Veți obține următoarea structură:

Defilare lină site-ul

Principalul lucru de reținut este că totul depinde Pluginuri jQuery trebuie conectat după jQuery în sine.

După ce totul este conectat, trebuie să inițializați scriptul:

(funcție ($) ( $(fereastră).on(„încărcare”, funcție () ( $(„corp”).mCustomScrollbar(( tema: „întunecat-subțire” )); )); ))(jQuery);

Și adăugați niște CSS reguli simple pentru a aplica derularea documentului. La începutul foii de stil, adăugați următorul marcaj:

Corp, html ( înălțime: 100%; preaplin: ascuns; )

Aceasta va elimina bara de defilare standard a browserului și va seta o înălțime pe care scriptul o poate înțelege. Nu vă fie teamă dacă vă conectați la un site deja terminat. În 99% din cazuri, acest lucru nu vă va afecta în niciun fel marcajul.

Se conectează exact la fel ca primul, are doar 3 setări și cântărește doar 2,6 kilobytes:

$(funcție() ( jQuery.scrollSpeed(100, 800, "easeOutCubic"); ))

Unde primul număr este pasul de defilare, al doilea număr este viteza, iar al treilea este tipul de animație.

Asta e tot. Pa tuturor; la revedere tuturor.

Instrucțiuni

Utilizați o etichetă div dacă aveți nevoie de o bară de derulare nu pentru întreaga pagină, ci doar pentru o zonă limitată a acesteia. ÎN limbaj HTML(HiperText Limbajul de marcare- „limbaj de marcare hipertext”) „etichetele” sunt comenzi individuale pentru browser pentru a afișa un anumit element de pagină. În chiar în formă simplă etichetă div (numită adesea „strat”) ca aceasta:
Este în interiorul stratului
Aici este eticheta de deschidere și aici este eticheta de închidere. Tot ceea ce este plasat între etichetele de deschidere și de închidere se află în strat ca într-un container, iar acestui container i se pot da dimensiuni - lățime și înălțime. Acest lucru se face folosind parametru suplimentar stil ("atribut"), care urmează în eticheta de deschidere:

Acesta este textul din interiorul stratului

Specificați în atribut stilul etichetei div și reguli și pentru barele de defilare a straturilor:

Acesta este textul din interiorul stratului

Aici overflow:auto înseamnă că barele de defilare vor apărea automat, adică atunci când conținutul stratului nu se încadrează în dimensiunile specificate. Dacă auto este înlocuit cu scroll, atunci aceste dungi vor fi întotdeauna prezente, indiferent dacă sunt necesare sau nu. Și valoarea ascunsă va avea efectul opus - nu va apărea, chiar dacă conținutul acestui recipient nu este vizibil dincolo de marginile sale.

Utilizați aceeași metodă pentru a adăuga bare de defilare în general. În mod implicit, acestea apar după cum este necesar, dar dacă dintr-un motiv oarecare este nevoie de prezența lor constantă, atunci regula de stil corespunzătoare ar trebui adăugată la codul html sursă. Găsiți eticheta de închidere a antetului documentului în codul paginii și introduceți aceste instrucțiuni de stil înaintea acesteia:
corp (overflow:scroll;)

În zilele noastre, a avea propriul site web nu este un lux, ci mai degrabă o necesitate. Crearea lui necesită anumite abilități și cunoștințe de html. Crearea unui site web simplu este destul de ușoară. Cu toate acestea, decorarea și crearea sa elemente interactive, oferind funcționalități suplimentare site-ului, va provoca dificultăți pentru un începător. Un astfel de element interactiv care sporește confortul vizitatorilor site-ului este o bară de defilare. Este util mai ales în domeniile site-ului care asigură legătura acestuia cu scripturi (interacțiunea site-ului cu utilizatorii).

Vei avea nevoie

• Internet sau orice tutorial html

Instrucțiuni

Cel mai important lucru în orice caz este confortul. Însăși ideea de a folosi o bară de derulare pe site-ul tău va fi potrivită numai dacă este dictată nu de dorința ta, ci de necesitatea acesteia. Faceți un aspect în care doriți să plasați bara de derulare. Alegeți un loc pentru derulare (numit și bare de defilare).

Selectați o locație pentru bara de derulare pe pagina care vă interesează. Trebuie să fie conectat rigid la un element (de exemplu, câmp de text sau listă derulantă). Trebuie să calculați acest spațiu în pixeli sau procente. Acest lucru nu este dificil de făcut, mai ales dacă aspectul site-ului are o structură clară.

Între etichetele BODY ar trebui să adăugați cod standard pentru defilare. Îl puteți găsi în orice manual html. Există două opțiuni - fie adăugați acest fragment direct la cod html pagini sau atașați într-un tabel stiluri css. A doua metodă este mai convenabilă dacă schimbați nu doar unul, ci întregul site. Apoi trebuie să intri opțiuni de culoare scrollbars, altfel va fi gri și neinteresant. Figura arată și etichetează elementele de defilare. Parametrii trebuie introduși în același mod ca în figură, cu punct și virgulă.

Acum trebuie neapărat să vă îmbunătățiți. Pentru a vă asigura că bara de derulare arată la fel în toate browserele, verificați-o pe cele principale - Internet Explorer, Mozilla Firefoxși Opera. Dacă se află pe una dintre ele, întoarce-te la primul pas și corectează greșelile.

Sfaturi utile

Există o modalitate simplă de a crea o bară de defilare pentru o pagină web. Setați parametrul de înălțime pentru site-ul dvs. la 75%, apoi derularea va apărea singur. Adevărat, al lui scheme de culori tot merită configurat.

Surse:

• Site pentru dezvoltatori web începători în 2019

Instrucțiuni

Accept solutie corecta. O bară de defilare ar trebui să apară pe site-ul dvs. numai dacă este dictată de necesitatea de a crea un confort suplimentar pentru utilizator și nu numai de dorințele dvs. Creați un aspect pentru pagina în care veți plasa bara de derulare. Alegeți un loc potrivit pentru el.

Faceți o legare rigidă a scroll-ului (aceasta poate fi numită și bară de defilare) la un anumit element al paginii. Acesta ar putea fi un câmp de text reprezentând un . Calculați locația de „parcare” a benzii în pixeli și procent. Acest lucru nu va fi deloc dificil dacă pagina este structurată clar.

Adăugați codul standard de bare de defilare între etichetele corpului. Dacă nu știi ce despre care vorbim, descărcați orice manual pe aspect html. Codul va fi descris clar acolo. Cel mai bine este să aveți la îndemână pentru astfel de cazuri șabloane gata făcute, astfel încât să puteți lua câteva elemente individuale de acolo codul programului, ceea ce face viața mult mai ușoară. Deci, ați găsit codul. Plasați-l fie direct în codul paginii, fie atașați-l tabelul css, ceea ce este mult mai simplu, dar numai dacă schimbi nu una, ci toate paginile site-ului.

Setați parametrii de culoare pentru dungă, altfel va fi standard gri, care cel mai probabil nu se va potrivi în designul site-ului. Acești parametri sunt setați în aceeași ordine ca pentru oricare altul element grafic pagini. Testați în mai multe browsere, de exemplu Mozilla, Opera și Explorer. Dacă se află în oricare dintre ele, corectați erorile de cod de program.

Setați parametrul de înălțime a site-ului la 75%, apoi codul programului pentru defilare va fi introdus automat. Dar tot trebuie să schimbați bara de defilare și, în special, ea opțiuni grafice. Acest lucru este descris în paragrafele anterioare.

Barele de defilare sunt bare verticale și orizontale plasate de-a lungul marginilor din dreapta (când scrieți de la stânga la dreapta) și de jos ale unei ferestre sau ale unei zone separate din cadrul unei ferestre, concepute pentru a muta conținutul în direcții verticale sau orizontale. Pentru a le gestiona aspectși comportamentul în paginile web utilizează elemente ale limbajului de descriere a stilului CSS (Cascading Style Sheets - „Cascading Style Sheets”), încorporate în limbajul HTML.

Instrucțiuni

Utilizați o etichetă div dacă trebuie să faceți o bară de defilare nu pentru întreaga pagină, ci doar pentru o zonă limitată a acesteia. În HTML (HyperText Markup Language), „etichetele” se referă la comenzi individuale pentru browser pentru a afișa un anumit element de pagină. În forma sa cea mai simplă, o etichetă div (numită adesea „strat”) este scrisă astfel:
Acesta este textul din interiorul stratului
Aici este eticheta de deschidere și aici este eticheta de închidere. Tot ceea ce este plasat între etichetele de deschidere și de închidere se află în strat ca într-un container, iar acestui container i se pot da dimensiuni - lățime și înălțime. Acest lucru se face folosind un stil de parametru suplimentar („atribut”), care ar trebui adăugat la eticheta de deschidere:

Acesta este textul din interiorul stratului

Vă rugăm să indicați în atribut de stil etichetă div precum și regulile pentru barele de defilare a straturilor:

Acesta este textul din interiorul stratului

Aici overflow:auto înseamnă că barele de defilare vor apărea automat, adică atunci când conținutul stratului nu se încadrează în dimensiunile specificate. Dacă auto este înlocuit cu scroll, atunci aceste dungi vor fi întotdeauna prezente, indiferent dacă sunt necesare sau nu. O valoare ascunsă va avea efectul opus - scroll-ul nu va apărea niciodată, chiar dacă conținutul acelui recipient nu este vizibil dincolo de marginile acestuia.

Utilizați aceeași metodă pentru a adăuga bare de defilare la pagina în ansamblu. În mod implicit, apar după cum este necesar, dar dacă dintr-un motiv oarecare este nevoie de prezența lor constantă pe pagină, atunci regula de stil corespunzătoare ar trebui adăugată la codul html sursă. Găsiți eticheta de închidere a antetului documentului în codul paginii și introduceți aceste instrucțiuni de stil înaintea acesteia:
corp (overflow:scroll;)

Sfat 2: Cum să faci o bară de defilare

În zilele noastre, a avea propriul site web nu este un lux, ci mai degrabă o necesitate. Crearea lui necesită anumite abilități și cunoștințe de html. Crearea unui site web simplu este destul de ușoară. Cu toate acestea, decorarea acestuia și crearea de elemente interactive care oferă funcționalitate suplimentară site-ului va cauza dificultăți pentru un începător. Un astfel de element interactiv care sporește confortul vizitatorilor site-ului este bara de defilare. Este util mai ales în domeniile site-ului care asigură legătura acestuia cu scripturi (interacțiunea site-ului cu utilizatorii).

Vei avea nevoie

• Internet sau orice tutorial html

Instrucțiuni

Cel mai important lucru de pe orice site web este confortul utilizatorului. Însăși ideea de a folosi o bară de derulare pe site-ul tău web va fi potrivită numai dacă aspectul ei este dictat nu de dorința ta, ci de necesitatea ei. Așezați pagina în care doriți să plasați bara de derulare. Alegeți un loc pentru derulare (aceasta se mai numește și bare de defilare).

Selectați o locație pentru bara de derulare de pe pagina site-ului care vă interesează. Trebuie să fie strâns legat de un element (de exemplu, un câmp de text sau o listă derulantă). Trebuie să calculați acest spațiu în pixeli sau procente. Acest lucru nu este dificil de făcut, mai ales dacă aspectul site-ului are o structură clară.

Între etichetele BODY ar trebui să adăugați codul standard de defilare. Îl puteți găsi în orice manual html. Există două opțiuni - fie adăugați acest fragment direct la codul html al paginii, fie atașați-l la foaia de stil css. A doua metodă este mai convenabilă dacă schimbați nu doar o pagină, ci întregul site deodată. Apoi trebuie să introduceți parametrii de culoare pentru bara de defilare, altfel va fi gri și neinteresant. Figura arată și etichetează elementele de defilare. Parametrii trebuie introduși în același mod ca în figură, separați prin punct și virgulă.

Acum cu siguranță ar trebui să testați modificările. Pentru a vă asigura că bara de derulare arată la fel în toate browserele, verificați-o pe cele principale - Internet Explorer, Mozilla Firefox și Opera. Dacă nu funcționează la unul dintre ele, reveniți la primul pas și corectați erorile.

Sfaturi utile

Există o modalitate simplă de a crea o bară de defilare pentru o pagină web. Setați parametrul de înălțime pentru site-ul dvs. la 75%, apoi derularea va apărea singur. Adevărat, schemele sale de culori merită încă personalizate.

Sfat 3: Cum să schimbați bara de defilare

Instrucțiuni

Luați decizia corectă. O bară de defilare ar trebui să apară pe site-ul dvs. numai dacă este dictată de necesitatea de a crea un confort suplimentar pentru utilizator și nu numai de dorințele dvs. Creați un aspect pentru pagina în care veți plasa bara de derulare. Alegeți un loc potrivit pentru el.

Faceți o legare rigidă a scroll-ului (aceasta poate fi numită și bară de defilare) la un anumit element al paginii. Acesta poate fi un câmp de text care este o listă derulantă. Calculați locația de „parcare” a benzii în termeni de pixeli și procente. Acest lucru nu va fi deloc dificil dacă pagina este structurată clar.

Adăugați codul standard de bare de defilare între etichetele corpului. Dacă nu știți despre ce vorbim, descărcați orice manual cu aspect html. Acesta va descrie în mod clar cum să scrieți un astfel de cod. Pentru astfel de cazuri, cel mai bine este să aveți la îndemână șabloane gata făcute de site-uri similare, astfel încât să puteți prelua unele elemente individuale ale codului programului de acolo, ceea ce simplifică foarte mult viața. Deci, ați găsit codul. Plasați-l fie direct în codul paginii în sine, fie atașați-l la un tabel css, ceea ce este mult mai simplu, dar numai dacă schimbați nu una, ci toate paginile site-ului.

Setați parametrii de culoare pentru bară, altfel va fi o culoare gri standard, care cel mai probabil nu se va potrivi în designul site-ului. Acești parametri sunt setați în aceeași ordine ca pentru orice alt element grafic de pe pagină. Testați defilarea în mai multe browsere, de exemplu, Mozilla, Opera și Explorer. Dacă nu funcționează în niciunul dintre ele, corectați erorile din codul programului.

Bună prieteni!
ÎN În ultima vreme Cititorii blogurilor au arătat un interes sporit pentru crearea și extinderea funcționalității. Recent am încercat să vă spun în detaliu cum să încorporați în (text), sper că am reușit.

Astăzi, unul dintre vizitatorii blogului a observat o astfel de caracteristică pe care dacă o adăugați fereastra modală Există prea mult text, apoi se întinde în lungime și este imposibil să derulați în sus pentru a vedea întregul text, iar butonul de închidere este ascuns din vedere, ceea ce desigur nu este bine. Desigur, fereastra modală poate fi închisă perfect făcând clic oriunde pe pagină, dar după cum a remarcat corect (din comentariul și dansul său), nu toți vizitatorii site-ului pot face față acestui lucru... În consecință, cititorul a avut o întrebare, cum pentru a adăuga o bară de defilare la această fereastră modală?

Soluția și întregul mecanism de execuție s-au dovedit a fi foarte simple, nu contează dacă afișați textul în fereastra principală sau în caseta de dialog. Puteți atașa chiar și o bară de defilare la un buton! Permiteți-ne, dragi cititori, să aruncăm o privire mai atentă asupra modului în care puteți plasa într-o fereastră modală text voluminos folosind bara de defilare, menținând astfel dimensiunile ferestrei.

Ne-am uitat la exemplul, cel mai curios s-a uitat prima dată sursă paginile demo și totul a devenit imediat clar, nimic supranatural. A fost posibil să se folosească textarea, iframe și pagina în sine - eticheta corporală, în care ar putea apărea ipotetic o bară de derulare, dar am folosit un container div, specificând totul în stil proprietățile necesare. Există o proprietate excelentă în CSS care controlează modul în care este afișat conținutul element bloc, dacă nu se potrivește complet și depășește aria dimensiunilor date.

Această proprietate are mai multe valori, în cazul nostru am folosit overflow: auto , scrollbar-ul va fi adăugat doar când este necesar, adică. când dimensiunea textului depășește dimensiunea blocului. Pentru a fi afișat în mod constant, trebuie să setați proprietatea de overflow pentru a defila

Este important de reținut că, dacă ați ales o fereastră modală cu o lățime de 500px pentru a plasa conținutul, ar trebui să setați lățimea blocului cu text să fie puțin mai mică, în limita a 480px. Puteți seta orice înălțime, deși nu ar trebui să o setați prea jos, o fereastră îngustă nu arată foarte bine, iar cititorul va trebui să deruleze constant. În exemplul meu, am setat înălțimea containerului div la 300px, nimeni nu vă împiedică să experimentați cu acest parametru, într-o direcție sau alta;

Până la urmă, în marcaj html, obținem un cod simplu și ușor de reținut, pe care ulterior îl puteți introduce cu ușurință în:

Bla bla bla - (text) Bla bla bla - (text) Bla bla bla - (text) Bla bla bla - (text) Bla bla bla - (text) Bla bla bla - (text)

Dacă faceți totul corect, ar trebui să aveți o fereastră pop-up grozavă cu o bară de defilare, un exemplu vizual vă va ajuta întotdeauna cu asta:

Există și alte metode, nu mai puțin interesante, pentru a rezolva această problemă pe care le-am considerat poate cea mai simplă metodă, fără a aglomera codul și a le folosi; formatare suplimentară proprietățile barei de defilare (scrollbar), despre care s-a scris de mult timp, mult și în detaliu, trebuie doar să utilizați un motor de căutare și mai mult de o mie de pagini cu informații despre acest subiect vă vor cădea.
Ei bine, tot ce trebuie să fac este să spun: La revedere!

PS: Sunt adesea întrebat cum să intru pe Google+? Totul este foarte simplu, urmați linkul de mai jos, introduceți numele dvs. de utilizator și parola Google și începeți-vă activitatea puternică și aș dori să mă adăugați în cercurile dvs., deoarece vor fi o mulțime de lucruri utile și interesante -)))

Nu avem educație, dar avem inspirație dacă aș fi primit o educație, aș fi devenit un prost.

Bob Marley

Cu tot respectul, Andrew