Meniul
AcasăCuvânt

Css div cu bara de derulare. Două moduri de a face o defilare div verticală și orizontală folosind jQuery și multe altele


3. Forțați derularea verticală și orizontală într-un bloc CSS
4. Exemplu de bloc div cu derulare

În acest articol ne vom uita la problema creării unui bloc (div) de dimensiune fixă, cu posibilitatea de a derula orizontal și vertical. Acest lucru poate fi implementat folosind CSS. Responsabil pentru asta proprietatea de debordare.

DESPRE proprietate utilă overflow Proprietatea overflow este responsabilă pentru afișarea conținutului element bloc. Poate fi folosit atunci când conținutul nu se potrivește complet și se extinde dincolo de zona blocului.

overflow-x - este responsabil pentru afișarea conținutului unui element bloc pe orizontală.
overflow-y - este responsabil pentru afișarea conținutului unui element bloc pe verticală.

Cod CSS

Prokrutka (
preaplin: automat; /* proprietate pentru defilare orizontală. În mod automat, dacă conținutul mai mult bloc */
}

Proprietăți și valori sunt vizibile depășite - întregul conținut al elementului este afișat, chiar și dincolo de lățimea setată.
ascuns - este afișată doar zona din interiorul elementului, restul este ascuns.
derulare - forțează adăugarea unei bare de defilare orizontale (y) sau orizontală (x).
automat - adăugat automat dungă orizontală derularea dacă blocul este mai mic.

Luați în considerare un exemplu de clasă CSS. În lățime și înălțime setăm lățimea și înălțimea blocului de care avem nevoie (conținutul blocului nu va depăși ele), iar cu proprietatea overflow: auto; setați derularea orizontală dacă este necesar

Cod CSS

Prokrutka (
lățime: 150px; /* latimea blocului nostru */
înălțime: 100px; /* înălțimea blocului nostru */


preaplin: automat; /* proprietate pentru defilare orizontală. Automat, dacă există mai mult de un bloc */
}

Instalare forțată derularea într-un bloc CSS De asemenea, puteți forța derularea pentru a se potrivi atât la înălțime, cât și la lățime. Pentru aceasta, fiecare axă: overflow-y: scroll; (vertical) overflow-x: scroll; (orizontală) specificați parametrul de defilare, forțați defilarea.

Cod HTML și CSS

Prokrutka (
înălțime: 150px; /* înălțimea blocului nostru */
fundal: #fff; /* culoare de fundal, alb */
chenar: 1px solid #C1C1C1; /* dimensiunea și culoarea chenarului blocului */


}

exemplu div bloc de defilare cod HTML și CSS



Exemplu CSS


.prokrutka (
înălțime: 200px; /* înălțimea blocului nostru */
latime: 200px; /* latimea blocului nostru */
fundal: #fff; /* culoare de fundal, alb */
chenar: 1px solid #C1C1C1; /* dimensiunea și culoarea chenarului blocului */
overflow-x: defilare; /* derulează orizontal */
overflow-y: scroll; /* derulează pe verticală */
}



Și sunt multe, multe text diferit si alte informatii. Și există o mulțime de text și alte informații diferite. Și există o mulțime de text și alte informații diferite. Și există o mulțime de text și alte informații diferite. Și există o mulțime de text și alte informații diferite. Și există o mulțime de text și alte informații diferite. Și există o mulțime de text și alte informații diferite. Și există o mulțime de text și alte informații diferite.



Una dintre proprietățile de depășire poate fi eliminată, apoi defilarea va rămâne pe o singură axă, ceea ce este suficient.
Vedeți scriptul în acțiune în exemplul de mai jos.

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ă într-un 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 care oferă funcționalități suplimentare site-ului vor cauza 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ă ea este 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încă 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 prelua câteva 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, 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.

Apoi setați parametrul de înălțime a site-ului la 75%. 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.

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.

Plugin pentru defilare lină site-ul

Pentru a rezolva această problemă, am ales pluginul Malihu-custom-scrollbar-plugin, deoarece are o mulțime de capabilități:

  • Bară de defilare verticală și/sau orizontală.
  • Puls de defilare personalizabil.
  • Derulare lină cu rotița mouse-ului.
  • Defilare lină folosind glisorul.
  • Suport pentru tastatură și defilare 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.

Conexiuni la plugin

Î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 să fie 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.

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 avea 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! Lăsați-ne, dragi cititori, să aruncăm o privire mai atentă asupra modului în care puteți plasa text voluminos folosind bara de defilare, menținând astfel dimensiunile ferestrei.

Ne-am uitat la exemplu, cel mai curios la care 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 defilare, dar am folosit un container div, specificând totul în stil proprietățile necesare. Există o proprietate minunată în CSS care controlează afișarea conținutului unui element bloc dacă întregul conținut nu se potrivește și se extinde dincolo de zona dimensiunilor specificate.

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 overflow pentru a defila

Este important să rețineți că, dacă ați ales o fereastră modală cu o lățime de 500px pentru a vă 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.

HTML/CSS

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 în acest sens:

Există și alte metode, nu mai puțin interesante, pentru rezolvarea acestei probleme; am considerat, poate, cea mai simplă metodă, fără a aglomera codul în mod inutil și a 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

Uneori este pur și simplu necesar să creați un bloc pe o pagină care are propria bară de defilare. Bineînțeles, aici îmi vin în minte rame, dar pentru că și-au depășit de mult utilitatea, nu sunt potrivite pentru noi. Aș dori o soluție în care un scroll ar putea fi adăugat la un div obișnuit. Și există o astfel de soluție, și nu doar una, ci toate folosind capabilități AJAX.

Defilare verticală cu jScrollPane Cuvinte comune

jScrollPane este un plugin pentru preferatul tău biblioteca jQuery. Îi permite să se atașeze defilare verticală div"y. Scroll-ul poate fi configurat după cum doriți. Pe pagina de plugin (link „info”) puteți găsi diferite căi aplicarea acestuia. Dintre acestea, voi evidenția două: prima - sugerează principalele metode și tipuri externe de defilări, a doua - arată implementarea derulării în cadrul unei pagini de defilare, precum și derularea întregii pagini ca atare. Puteți descărca pluginul de pe site-ul oficial, dar îl puteți descărca și de pe al meu

Mici trucuri

Am folosit pluginul de mai multe ori în practică. Un astfel de exemplu poate fi văzut. Aspect este non-standard, ceea ce este bine - poți sculpta orice dorește inima ta (nu sufletul tău, prietenul meu, ci pentru clienți, clienți - nota editorului).

Uneori, un plugin necesită instalarea de pluginuri suplimentare pentru ca roata mouse-ului să funcționeze pentru defilare și pentru ca dimensiunea derulării să se schimbe în funcție de cantitatea de conținut. Dar, după cum a arătat practica, totul funcționează fără ele. Desigur, poate că m-am grăbit să asamblam pluginul, dar este puțin probabil, l-am descărcat din cel oficial, se pare.

Exemplu

Nu voi analiza codul în detaliu; în principiu, nu este nimic complicat acolo. Cu toate acestea, mă voi opri în unele puncte.

fișier HTML. Structura unui bloc cu defilare este următoarea



Conţinut

Există un div exterior cu o clasă, există un div interior cu un identificator și clasa necesară pentru panoul de defilare. Toate. Funcția este numită după cum urmează:


$(funcție()
{
$("#vnutrenniy).jScrollPane((showArrows:true, scrollbarWidth: 16, arrowSize: 16));
});

Când sunați, indicați diverși parametri, cum ar fi lățimea barei de defilare (scrollbarWidth), dimensiunea săgeților acesteia (arrowSize) și așa mai departe. Principalele sunt următoarele:

scrollbarWidth [număr] - lățime de defilare (implicit 10)

scrollbarMargin [număr] - marja din stânga barei de defilare (implicit 5)

wheelSpeed ​​​​[number] - viteza de defilare a roții în pixeli (implicit 18)

showArrows [boolean] - afișați sau nu săgețile grafice (implicit false)

arrowSize [număr] - înălțimea săgeții dacă showArrows=true (calculat prin CSS dacă nu este specificat)

dragMinHeight [număr] - înălțimea minimă a glisorului (implicit 0)

dragMaxHeight [număr] - inaltime maxima glisor (implicit 99999!)

scrollbarOnLeft [boolean] - dacă bara de derulare este necesară în stânga, setați-o la true.

Acum să deschidem fișierul jscroll.css. Priviți următoarele rânduri.

8-15 linii. Am stabilit lățimea și înălțimea div-ului interior (!), depășirea (nu este un parametru necesar, se pare), cel mai probabil va fi nevoie de umplutură, restul nu contează.

Rândurile 17-19. Div. exterioară În niciun caz nu trebuie să specificați o înălțime pentru acesta și trebuie să specificați float: left . Toate acestea se fac cu un singur scop - astfel încât Opera 10 să funcționeze normal cu derulare. Dacă acest lucru nu este respectat, atunci defilarea divei va fi sincronă cu defilarea browserului și rezultatul va fi o prostie completă. Tine minte asta.

Rândurile 23-57. Defilați stilurile de imagine

În teorie, schimbarea liniilor rămase nu este necesară.

Verticală și defilare orizontală pe Flexcroll

Nu sunt familiarizat cu acest scenariu. El merge fără folosind jQuery, care este un plus (jQuery nu este întotdeauna necesar). Al doilea avantaj este că există defilare orizontală. Al treilea avantaj este că arhiva cu pluginul conține exemple de utilizare, și bune, diverse, pentru care mare respect.

Nu a trebuit să lucrez cu pluginul pe proiecte, dar prima cunoștință s-a dovedit a fi plăcută. Singurul dezavantaj vizibil este că, atunci când treceți cu mouse-ul, cursorul nu se transformă într-un „pix”. Cred că acesta este un minus, deoarece intuitiv nu este clar dacă acesta este un scroll sau nu. Cu toate acestea, cred că nu va fi o problemă să remediați totul folosind CSS.

În concluzie

Scroll-urile verticale și orizontale pentru div-uri nu sunt o problemă în implementare, totul este simplu și ușor de implementat. Prin urmare, mergeți mai departe, folosiți-l, descoperiți ceva nou. Voi fi întotdeauna bucuros să aud comentarii, întrebări, sugestii =).