Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come aggiungere una barra di scorrimento personalizzata a qualsiasi elemento in WordPress

Il vostro sito WordPress ha un aspetto disordinato? Avete menu lunghi, barre laterali grandi o contenuti che non si adattano bene? Una barra di scorrimento personalizzata può aiutare a correggere questi problemi.

Purtroppo non è facile trovare un plugin semplice per questo. Altre guide suggeriscono di usare il codice, ma questo può essere spaventoso se si è alle prime armi. Ma non è necessario.

Abbiamo costruito centinaia di siti web, compresi quelli per i nostri brand, quindi sappiamo come aggiungere barre di scorrimento in modo rapido, efficiente e semplice.

In questa guida vi mostreremo come aggiungere una barra di scorrimento personalizzata a qualsiasi parte del vostro sito utilizzando un builder di pagine. Se questo non è adatto alle vostre esigenze, potete leggere il nostro metodo per principianti di CSS personalizzato per aggiungere una barra di scorrimento.

How to Add a Custom Scrollbar to Any Element in WordPress

Quando aggiungere una barra di scorrimento a elementi specifici sul vostro sito WordPress?

L’aggiunta di una barra di scorrimento per gli elementi di WordPress può migliorare notevolmente l’esperienza utente del sito. Ma quando dovreste usare questa caratteristica?

Supponiamo di gestire un blog di moda con molte categorie. Il vostro menu principale potrebbe avere un menu a discesa “Abbigliamento” con oltre 20 sottocategorie. Senza una barra di scorrimento, questo menu potrebbe estendersi giù per l’intera pagina, facendo perdere di vista gli altri contenuti.

E se avete molti contenuti nella barra laterale, a volte può essere difficile scegliere quali eliminare. Una barra di scorrimento per i widget lunghi della barra laterale può risolvere questo problema.

An example of a scrollbar in a sidebar

Altri casi d’uso sono le descrizioni lunghe e dettagliate nelle pagine dei prodotti, le sezioni di commento con centinaia di commenti o le gallerie di immagini con spazio limitato.

A questo proposito, vi mostreremo due opzioni per aggiungere una barra di scorrimento personalizzata a qualsiasi elemento del vostro sito web WordPress.

Si consiglia di scegliere l’opzione 1 se si è agli inizi del sito e si desidera utilizzare un builder di pagine con una funzione di barra di scorrimento personalizzata. Infatti, se avete già utilizzato un tema diverso, dovrete cambiare il vostro tema per questo metodo.

D’altra parte, se vi piace il vostro tema attuale, potete scegliere l’opzione 2 per aggiungere una barra di scorrimento personalizzata utilizzando il codice CSS. Non preoccupatevi, vi spiegheremo il processo passo per passo, in modo che sia facile da seguire per chiunque.

Potete usare i link rapidi qui sotto per passare al metodo che preferite:

Nota: volete invece modificare la barra di scorrimento del vostro intero sito web WordPress? Allora consultate la nostra guida su come add-on una barra di scorrimento personalizzata in WordPress.

Metodo 1: Usare Thrive Architect per aggiungere una barra di scorrimento personalizzata (senza codice)

Un modo per aggiungere una barra di scorrimento personalizzata in un elemento specifico è quello di utilizzare un builder di pagina con una caratteristica di barra di scorrimento. In questo modo, è possibile personalizzare facilmente la barra di scorrimento senza toccare alcun codice.

Per questo metodo, utilizzeremo Thrive Architect. Oltre alla caratteristica della barra di scorrimento, Thrive Architect dispone di oltre 300 template per creare rapidamente pagine dall’aspetto professionale e di funzioni di contenuto dinamico per personalizzare l’esperienza dei visitatori.

L’interfaccia trascina e rilascia è di facile utilizzo e lo rende ideale per chi è alle prime armi con WordPress. Per un’analisi più dettagliata di questo strumento, selezionate la nostra recensione di Thrive Architect.

Sebbene Thrive Architect non offra una versione gratuita, è possibile utilizzare il nostro speciale codice sconto Thrive Architect per salvare fino al 50% sull’acquisto iniziale.

Fase 1: Impostazione di Thrive Architect e dei temi Thrive

Per iniziare, è necessario installare il plugin Thrive Architect. È possibile accedervi accedendo al proprio account sul sito web di Thrive Themes.

Quindi, scaricare e installare il plugin Thrive Product Manager. Se avete bisogno di aiuto, fate riferimento alla nostra guida sull’installazione dei plugin di WordPress per i principianti.

Install Thrive Product Manager

Dopo l’attivazione del plugin, andare su Product Manager nella dashboard di WordPress.

Fare clic su “Accedi al mio account” per collegare il sito WordPress con l’account di Thrive Themes.

Log into your Thrive Themes account

A questo punto si dovrebbe vedere un elenco di temi Thrive disponibili nel proprio account.

Trovate “Thrive Architect” e spuntate la casella “Installa prodotto”.

Installing Thrive Architect

Scorrere verso il basso per trovare“Thrive Theme Builder” e selezionare l’opzione “Installa tema”.

Quindi, fare clic su “Installa i prodotti selezionati”. Questo passaggio è necessario perché Thrive Architect lavora insieme a Thrive Theme Builder.

Installing the Thrive Theme Builder

La schermata successiva mostrerà Thrive Product Manager che installa e attiva Thrive Theme Builder.

Una volta completato, selezionare “Vai alla Bacheca dei temi”.

Activating Thrive Architect and Thrive Theme Builder

Ora è il momento di selezionare un design di base per il sito utilizzando la libreria di temi di Thrives.

Se non siete sicuri di quale scegliere, usate il pulsante “Anteprima” per vedere l’anteprima di ogni tema. Una volta deciso, fate clic su “Scegli”.

Choosing a Thrive Theme Builder theme

A questo punto si inserisce la procedura guidata per la creazione del tema.

Questa procedura guidata vi guiderà attraverso l’uploader del vostro logo, la selezione dei colori del brand per il vostro tema e l’impostazione delle varie strutture e template del tema.

Assicurarsi di completare la configurazione guidata prima di passare alla fase successiva.

Thrive Theme Builder's setup wizard

Passo 2: Aggiungere un elemento boxed al tema

Aggiungiamo ora un elemento content boxed al tema WordPress, che ha la caratteristica di scrollbar predefinita.

In Thrive Themes, un boxed è un blocco che si può usare come contenitore per raggruppare più blocchi. Questo può essere utile se si vuole che un insieme di elementi sia stilizzato allo stesso modo o gestito come un gruppo.

In questo esempio, aggiungeremo un boxed di contenuto che contiene un lungo elenco di categorie di pubblicazioni del blog. In questo scenario, vogliamo essere in grado di visualizzare tutte le categorie nella barra laterale senza renderla troppo lunga.

Per prima cosa, visitate una pagina o una pubblica del vostro blog WordPress in cui volete che la barra di scorrimento sia on.

Quindi, nella barra degli strumenti in alto, cliccate su “Modifica template [nome]” o “Modifica con Thrive”.

Editing a WordPress website with Thrive Architect

A questo punto si dovrebbe arrivare all’interfaccia di modifica di Thrive Architect. Per add-on il blocco content boxed, fare clic sul segno ‘+’ sul lato destro della pagina e selezionare l’elemento ‘Content Box’.

Quindi, trascinarlo e rilasciarlo nel punto in cui si desidera posizionare l’elemento con la barra di scorrimento.

Adding a Content Box element in Thrive Architect

È ora possibile aggiungere altri elementi al boxed al contenuto. Ad esempio, si può fare clic di nuovo sul segno ‘+’ e aggiungere il blocco ‘Testo’. A questo punto si può digitare il testo che si desidera.

Thrive Themes offre tonnellate di elementi visivi, da quelli di base come testo e immagini a moduli e tabelle di prezzi.

Adding a Text box element in Thrive Architect

Poiché vogliamo aggiungere un elenco di categorie alla barra laterale, aggiungeremo anche l’elemento ‘Elenco dinamico stilizzato’ al boxed al contenuto.

Questo blocco in pratica estrae i dati dal sito web per visualizzare dinamicamente un elenco, come categorie, tag o autori. Il blocco si aggiorna automaticamente man mano che si costruisce il sito web.

Adding a Dynamic Styled List element in Thrive Architect

Una volta trascina e rilascia l’elenco in stile dinamico nella casella di contenuto, fare clic sul pulsante ‘Seleziona tipo di elenco’.

Quindi, fare clic su “Elenco categorie”.

Choosing a list type to display in Thrive Architect

Ora, l’elenco di categorie, il blocco di testo e qualsiasi altro elemento aggiunto al boxed al contenuto si trovano nello stesso contenitore.

Come si può vedere, l’elenco è piuttosto lungo ed è per questo che vogliamo aggiungervi una barra di scorrimento.

Fase 3: Abilitare la barra di scorrimento nel boxed il contenuto

Se si seleziona il contenitore e si fa clic sulla freccia blu a sinistra, si vedranno molte opzioni per personalizzare il boxed il contenuto.

Configuring the Content Box settings in Thrive Architect

Le impostazioni per aggiungere una barra di scorrimento si trovano nella scheda “Layout e posizione”. Qui è possibile regolare la spaziatura interna, il margine, la larghezza, l’altezza, l’allineamento e così via.

La prima cosa che abbiamo fatto è stata cliccare sulla freccia bianca all’interno dell’area di imbottitura blu, proprio sotto la sezione ‘Margini e spaziatura’. Questo per assicurarci che il riquadro del contenuto sia allineato con il resto degli elementi della barra laterale.

Sentitevi liberi di esplorare altre opzioni per assicurarvi che la vostra boxed abbia un aspetto ben proporzionato.

Opening the Layout and Position menu in Thrive Architect

Scorriamo poi verso il basso fino alla sezione Altezza. Facciamo clic sul pulsante ‘Max’ e modifichiamo l’altezza in pixel con un numero molto più piccolo. In questo caso, siamo passati da 617px a 300px.

In questo modo, il boxed di contenuto sarà molto più corto, facendo scomparire i nomi delle categorie nella parte inferiore.

Setting a max height for the Content Box in Thrive Architect

Fatto ciò, spostarsi di nuovo giù per il pannello e aprire la scheda “Avanzate”. Selezionare quindi ‘Scorrimento’ nelle impostazioni di Overflow e attivare l’opzione ‘Barra di scorrimento stile’.

Una barra di scorrimento dovrebbe essere aggiunta automaticamente al boxed al contenuto.

Enabling the custom scrollbar in Thrive Architect

Questo è tutto per aggiungere una barra di scorrimento personalizzata con Thrive Architect. È possibile continuare a modificare il tema, la pagina o la pubblicazione di WordPress, oppure fare clic su “Salva lavoro” in basso per pubblicare le modifiche.

Ecco come appare la nostra barra di scorrimento sul sito demo:

Thrive Architect's custom scrollbar example

Metodo 2: utilizzare il codice CSS per creare una barra di scorrimento personalizzata

Se modificare il tema di WordPress e utilizzare un builder di pagina per creare una barra di scorrimento personalizzata vi sembra eccessivo, potete invece utilizzare il codice CSS. Questo metodo consente di personalizzare la barra di scorrimento direttamente sulla pagina di WordPress.

Non preoccupatevi se siete alle prime armi con l’elaborazione in corso degli snippet di codice. Vi guideremo passo dopo passo, semplificando l’abilitazione di questa caratteristica sul vostro sito WordPress.

Innanzitutto, cerchiamo di capire come funzionano i CSS. CSS è l’acronimo di Fogli di stile a cascata. È un linguaggio che indica ai browser come visualizzare gli elementi su una pagina web. Nel nostro caso, useremo i CSS per aggiungere e stilizzare una barra di scorrimento personalizzata.

Per utilizzare i CSS personalizzati, abbiamo bisogno di due cose:

  1. Una classe CSS: È come un tag di nome per un elemento della pagina. Si aggiunge all’elemento che si vuole modificare.
  2. Codice CSS: Si tratta dell’insieme di istruzioni che indicano al browser come stilizzare l’elemento con la classe CSS.

Quindi, per aggiungere una barra di scorrimento personalizzata, si assegnerà innanzitutto una classe CSS all’elemento che si desidera modificare. Quindi, aggiungeremo del codice CSS che crei la barra di scorrimento per gli elementi con quella classe.

Aggiungerete la classe CSS scroll-bar al vostro elemento. Di seguito vi mostreremo come farlo. Questo è il frammento di codice CSS completo che aggiunge la barra di scorrimento:

.scroll-bar {
  max-height: 100px;  /* Adjust the maximum height as needed */
  width:250px;  /* Adjust the width as needed */
  overflow-y: scroll; /* Enable vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}


/* Customizing the vertical scrollbar for Webkit-based browsers (Chrome, Safari) */
.scroll-bar::-webkit-scrollbar {
  width: 10px; /* Width of the vertical scrollbar */
}


.scroll-bar::-webkit-scrollbar-track {
  background: #eaeaea; /* Background of the scrollbar track */
}


.scroll-bar::-webkit-scrollbar-thumb {
  background: grey; /* Color of the scrollbar thumb */
  border-radius: 15px; /* Rounded corners for the thumb */
}


/* Hover state for the scrollbar thumb */
.scroll-bar::-webkit-scrollbar-thumb:hover {
  background: black; /* Change color when hovered */
}


/* For Firefox */
.scroll-bar {
  scrollbar-width: thin; /* Define scrollbar width */
  scrollbar-color: #888 #f1f1f1; /* Scrollbar thumb and track color */
}

Passo 1: Aggiungere la classe CSS all’elemento

Esistono diversi modi per add-on una classe CSS a un elemento del vostro sito WordPress.

Se ci si trova nell’editor a blocchi o nell’editor dell’intero sito, è sufficiente fare clic su qualsiasi blocco della pagina, della pubblicazione o del template del tema del blocco. Quindi, nella barra laterale delle impostazioni del blocco, aprire la scheda “Avanzate” e inserire la classe CSS nel campo “Classi CSS aggiuntive”.

Una volta fatto, basta cliccare su Aggiorna, Pubblica o Salva.

Adding a CSS class in the full-site editor

Se si utilizza un tema classico, questo procedimento funziona anche con l’editor a blocchi dei widget. Andare in Aspetto ” Widget e fare clic su qualsiasi blocco a cui si desidera add-on la classe CSS.

Successivamente, si vedrà la stessa scheda Avanzate nella barra laterale delle impostazioni del blocco. È sufficiente inserire la classe CSS nel campo “Classe/i CSS aggiuntiva/e” come in precedenza.

Adding a CSS class in the widget editor

Passo 2: Aggiungere il codice CSS al tema

Ora andiamo avanti e aggiungiamo il nostro codice CSS personalizzato. Vi mostreremo 3 modi per farlo: utilizzando il personalizzatore del tema, l’editor completo del sito e WPCode.

La prima opzione è dedicata agli utenti dei temi classici. Inoltre, si tratta di una caratteristica integrata, quindi non è necessario un plugin per inserire il codice o aprire i file del tema.

Per farlo, si può aprire il personalizzatore del tema di WordPress andando su Aspetto ” Personalizza.

Launch WordPress theme customizer

Nota: se non vedete questa impostazione su WordPress, probabilmente state usando un tema a blocchi e potete usare il metodo successivo. Per ulteriori informazioni, selezionate la nostra guida su come correggere il personalizzatore di temi mancante in WordPress.

Metodo 1: Aggiunta di CSS ai temi di Editor classico

All’interno del personalizzato, trovare e cliccare su “CSS aggiuntivi”.

Opening the Additional CSS tab in Theme Customizer

Qui è sufficiente incollare il codice che vi abbiamo mostrato in precedenza.

Una volta add-on il codice, si vedranno automaticamente le modifiche sul tema.

Creating a scrollbar in a classic theme with CSS

Come si può vedere, l’elemento a cui è stato aggiunto il CSS ha ora una barra di scorrimento. A questo punto, è sufficiente fare clic su “Pubblica”.

Metodo 2: Aggiunta di CSS con l’editor del sito completo

Se si dispone di un tema a blocchi, è necessario aggiungere il codice CSS utilizzando l’editor del sito completo, quindi basta andare su Aspetto “ Editor .

Selecting the Full-Site Editor from the WordPress admin panel

Sono disponibili alcune opzioni di menu per personalizzare il tema del blocco.

Qui, fare clic su “Stili”.

Opening the Styles menu in Full Site Editor

In questa pagina dovrebbero essere disponibili alcuni temi a blocchi tra cui scegliere.

Lo ignoreremo e faremo clic sul pulsante “Modifica”. Ha la forma di una matita.

Clicking the Edit Styles button in the Full Site Editor

Ci si trova ora all’interno dell’interfaccia di modifica.

Sul pannello laterale destro, fare clic sul menu a tre punti accanto all’icona delle revisioni e selezionare “CSS aggiuntivo”.

Opening the Additional CSS menu in full-site editor

A questo punto, è sufficiente incollare lo snippet di codice precedente. Le modifiche dovrebbero essere visibili automaticamente.

Una volta fatto, cliccate su “Salva”.

Inserting custom CSS in full-site editor

Uno svantaggio dell’uso del personalizzatore di temi e dell’editor del sito per inserire i CSS è che se si decide di aggiornare o cambiare il tema, si rischia di perdere la personalizzazione dei CSS.

Per questo motivo si consiglia di utilizzare WPCode per modificare il CSS del sito, soprattutto se si utilizza l’editor a blocchi e un tema basato su blocchi. Potete seguire questo metodo qui sotto, che funziona anche con i temi classici.

Metodo 3: Aggiunta di CSS con WPCode

Se avete paura di personalizzare il vostro sito usando il codice, WPCode è la soluzione perfetta per voi. Questo plugin per snippet di codice rende sicuro l’inserimento di codice personalizzato, in quanto non è necessario interagire direttamente con i file del tema.

Se si verifica un errore, WPCode rileva e disattiva automaticamente il codice che causa il problema. In questo modo, le possibilità che il sito venga danneggiato sono minime.

Innanzitutto, installate il plugin WPCode sul vostro sito web. Per maggiori informazioni, potete leggere la nostra guida per principianti su come installare un plugin di WordPress.

Quindi, andate su Code Snippets “ + Aggiungi snippet nella vostra Bacheca di WordPress. Scegliete “Aggiungi codice personalizzato (nuovo snippet)” e fate clic su “+ Aggiungi snippet personalizzato”.

Adding a new custom code snippet in WPCode

A questo punto, dare un nome al nuovo snippet di codice personalizzato. Può essere qualcosa di semplice come “CSS Scrollbar”.

Successivamente, modificare il tipo di codice in “Snippet CSS”.

Inserting custom CSS to create a scrollbar in WPCode

Nel riquadro dell’anteprima del codice, incollare lo snippet mostrato in precedenza.

Una volta fatto, scorrere giù la pagina fino alla sezione “Pannello di inserimento”. Assicurarsi che il metodo di inserimento sia “Auto Insert” e che la posizione sia “Site Wide Header”.

A questo punto, è sufficiente attivare/disattivare il pulsante in alto a destra in modo che risulti “Attivo” e cliccare su “Salva snippet”.

Choosing Site Wide Header as the code location in WPCode

Ora si dovrebbe vedere una barra di scorrimento sull’elemento a cui è stata add-on la classe CSS.

Ecco un esempio di aggiunta di una barra di scorrimento all’elenco delle pubblicazioni recenti:

Example of a scrollbar made with CSS

Come aggiungere una barra di scorrimento personalizzata a una voce di menu con più sottomenu

Chi è curioso di sapere come aggiungere la barra di scorrimento alla voce di menu di navigazione che ha un lungo elenco di sottomenu.

Il processo è in realtà molto simile a quello che vi abbiamo appena mostrato. Ma ci sono alcune piccole modifiche qua e là, a seconda del tema che si sta utilizzando.

Se si utilizza un tema classico, si deve aggiungere la classe scroll-bar solo alla voce di menu principale. Non è necessario aggiungerla agli elementi del sottomenu.

Per aggiungere una classe CSS al menu, si può aprire il personalizzatore del tema.

Quindi, fare clic sul pulsante “Menu”.

Selecting Menus in Theme Customizer

Quindi, fare clic sull’icona dell’ingranaggio “Impostazioni” e selezionare “Classi CSS”.

Consente di aggiungere una classe CSS a ciascuna voce di menu.

Adding CSS classes to menu items

Ora, spostatevi giù nel pannello della barra laterale.

Quindi, aprire il menu principale.

Selecting the primary menu in Theme Customizer

A questo punto, è possibile selezionare la voce di menu a cui si desidera aggiungere la classe CSS e fare clic per espanderla.

Dovrebbe esserci un campo chiamato “Classi CSS”, dove è possibile aggiungere la classe.

Adding a CSS class to menu item in WordPress theme customizer

A parte questo, bisogna assicurarsi di aggiungere la classe del sottomenu dopo ogni riferimento alla classe della barra di scorrimento nel codice CSS, in questo modo:

.scroll-bar .sub-menu {
  max-height: 100px;  /* Adjust the maximum height as needed */
  overflow-y: scroll; /* Enable vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}
/* Do the same to the rest of the code */

Ecco come dovrebbe apparire il menu di navigazione:

Adding a scrollbar to a menu in WordPress theme customizer

Lo stesso principio vale per i temi a blocchi.

È necessario aggiungere la classe scroll-bar solo alla voce di menu principale, non ai sottomenu.

Adding a CSS class to a menu in the full-site editor

Ecco dove le cose differiscono. Dovete visitare il vostro sito web di WordPress e aprire lo strumento di ispezione del browser.

Per gli utenti di Chrome, basta cliccare con il tasto destro del mouse sulla voce di menu con sottomenu e selezionare “Ispeziona”.

Accessing the Inspect element tool in Chrome

Sulla tastiera, premere CTRL/Command + F per attivare la caratteristica Trova. Individuare quindi il codice HTML <ul></ul> che contiene la classe della barra di scorrimento.

Il codice esatto sarà diverso da tema a tema, ma ecco come si presenta il nostro:

<ul data-wp-on-async--focus="actions.openMenuOnFocus" class="wp-block-navigation__submenu-container scroll-bar wp-block-navigation-submenu">...</ul>

Saprete che state selezionando la riga di codice giusta se tutti gli elementi del sottomenu sono in evidenza.

Locating the scroll-bar element using the Inspect tool

Ora, si vogliono copiare tutte queste classi CSS tra class=" e ">.

Nel codice CSS, sostituire la classe scroll-bar con tutte queste classi e un punto (.) prima di essa per indicare che si tratta di una classe. È bene anche add-on su ogni riga che personalizza la barra di scorrimento, per assicurarsi che il tema non sovrascriva queste impostazioni.

Ecco un esempio:

.wp-block-navigation__submenu-container.scroll-bar.wp-block-navigation-submenu {
 max-height: 100px !important; /* Adjust the maximum height as needed */
 overflow-y: auto !important; /* Enable vertical scrolling */
 overflow-x: hidden !important; /* Hide horizontal scrollbar */
}
/* Do the same to the rest of the code */

Una volta aggiunto questo codice, il menu di navigazione dovrebbe avere questo aspetto:

An example of a scrollbar in a block theme menu made with CSS

Come personalizzare il design della barra di scorrimento personalizzata

Ora che è stata aggiunta una barra di scorrimento personalizzata, si potrebbe desiderare di farla corrispondere al design del sito web. È possibile modificare facilmente l’aspetto della barra di scorrimento utilizzando i CSS. Vediamo come personalizzare le dimensioni, il colore e la forma.

Si supponga di voler modificare l’altezza massima dell’elemento a cui si sta aggiungendo una barra di scorrimento. In questo caso, si può modificare il numero in max-height: in alto con un numero a piacere, purché sia in sgranature.

È anche possibile regolare il numero in larghezza: per rendere più ampia o più stretta la larghezza dell’elemento con la barra di scorrimento.

Adjusting the scrollbar's heigh and width with CSS

Per regolare le dimensioni della barra di scorrimento, trovare la linea larghezza: 10px; sotto il selettore .scroll-bar::-webkit-scrollbar.

Aumentare questo numero per rendere la barra di scorrimento più ampia o diminuirlo per renderla più stretta. Ad esempio, larghezza: 15px; creerà una barra di scorrimento più ampia, mentre larghezza: 5px; la renderà più sottile.

Adjusting the scrollbar size with CSS

Per cambiare il colore della barra di scorrimento, trovare la riga che dice background: grey; sotto il selettore .scroll-bar::-webkit-scrollbar-thumb.

Sostituire “grigio” con un colore a piacere, come “blu” o qualsiasi altro colore utilizzando il codice colore esadecimale (ad esempio, #0000FF).

Changing the scrollbar's color with CSS

Per rendere la barra di scorrimento più arrotondata, cercate la proprietà border-radius.

Più alto è il numero, più arrotondati saranno gli angoli. Provate a modificare border-radius: 15px; in border-radius: 20px; per un aspetto più arrotondato, o border-radius: 0px; per angoli più netti.

Changing the scrollbar's border radius with CSS

Si noti che le modifiche di cui sopra interessano solo i browser basati su Webkit, come Chrome e Safari.

Per Firefox, è necessario regolare la proprietà scrollbar-color. Il primo colore è per il pollice (la parte che si trascina) e il secondo è per la traccia (lo sfondo). Ad esempio, scrollbar-color: blue #eaeaea creerà una barra di scorrimento blu su una traccia grigio chiaro in Firefox.

Changing the scrollbar's appearance in Firefox with CSS

Dopo aver apportato queste modifiche, salvate il CSS e aggiornate la pagina di WordPress per vedere la nuova barra di scorrimento personalizzata in azione. Sentitevi liberi di sperimentare diversi colori e dimensioni fino a trovare l’aspetto perfetto per il vostro sito web.

Approfondisci i modi per migliorare il tuo Web Design WordPress

Ora che avete imparato ad aggiungere barre di scorrimento personalizzate al vostro sito WordPress, perché non esplorare altri modi per migliorare il design e la funzionalità del vostro sito web? Ecco alcune guide utili per portare le vostre competenze su WordPress al livello successivo:

Speriamo che questo articolo vi abbia aiutato a capire come aggiungere una barra di scorrimento personalizzata a qualsiasi elemento del vostro sito WordPress. Potreste anche voler selezionare i nostri esperti tra i migliori builder per temi WordPress e la nostra guida su come add-on una barra di avanzamento della lettura in WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

17 commentiLascia una risposta

    • WPBeginner Support

      You’re welcome :)

      Admin

  1. alex

    Hello I cannot seem to get my custom scroll bar to display vertically??? I have it set to a wordpress text widget with the height at 400 px and the width at 100 px and it comes up horizontal which is not what I need. thank you

    • WPBeginner Support

      Your content may not be tall enough, you may want to reach out to the plugin’s support and they should be able to assist.

      Admin

  2. irit

    hi
    Thank you for sharing the plugin :)
    i have a very long image that i would like to put a scroll bar on.
    i know i have the right selector since the element does change, unfortunately it just “squishes” to whatever size i put into height (i used Elementor to create that page)
    thank you

    • WPBeginner Support

      You would want to first reach out to Elementor as their page builder may be preventing the image from going beyond the size of the section you have set up.

      Admin

  3. Danny

    This is exactly my idea – to use it and make visitors spend more time on my site. My frontpage is such that I can combine several pages. So there is this particular page that is part of my front page, but it is long, so i want to use the scrolling to keep it short yet visitors can scroll just within it.
    My problem is that I dont know the Target Element ID.
    Can you assist?

    • WPBeginner Support

      If you reach out to your theme’s support for the specific section you want they should be able to let you know the element they’re using.

      Admin

  4. Danny

    I want to add scrolling on a particular page – the page itself, not the sidebar or any widget.
    What will the Target ELement ID be?
    I right-clicked on the page body, but I dont know what to look out for. Can anybody advice?

    • WPBeginner Support

      It would depend on the specific theme but normally for what you’re wanting it would be the content area.

      Admin

      • Danny

        I am using the free version of raratheme’s lawyer landing page and I dount the developer can offer me such info as a free user.

        Sure, its the content area, and I wonder what the Element ID is called. Any ideas?

  5. Alexandre

    Very nice and easy to custom widget. However, it took me a couple of hours to find what to enter in the Target Element Sector section while using Elementor. It finally worked with the following line: “.elementor-element-6daf57c”. The dot (“.”) at the beginning is important.

    Thank you!

    • WPBeginner Support

      Thanks for sharing this specification to help other users :)

      Admin

  6. Rushikesh

    This is working for desktop view, but I don’t want this scrollbar work on mobile devices. Because it’s ruin responsiveness. How can I do it to stop working on mobile devices?

  7. Rosie Malik

    This tool is such a tremendous help to website appearance and functionality! You can select your featured items (pictures, posts, etc.) and put them almost anywhere … and several times, too! Your site visitor will spend more time on your site and interract with more content, etc. This is a total win/win!

  8. igor Griffiths

    Thanks for sharing this plugin and more importantly how to set it up, I would never have thought to use the Chrome inspect element to find the target id without many hours of experimentation.

    Looks like a very flexible plugin that with a little imagination could be put to many powerful and engaging uses

    igor

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.