Come configurare smartphone e PC. Portale informativo
  • casa
  • sistema operativo
  • Muovi e scorri il foglio. Styling di una barra di scorrimento con CSS Modifica dello scorrimento: scrollTo, scrollBy, scrollIntoView

Muovi e scorri il foglio. Styling di una barra di scorrimento con CSS Modifica dello scorrimento: scrollTo, scrollBy, scrollIntoView

Con il rilascio di Windows 10, una nuova funzionalità è stata aggiunta al touchpad dei laptop, presente da tempo in OS X: i gesti delle dita sul touchpad, incluso lo scorrimento delle pagine verticalmente o orizzontalmente con due dita. Ma c'è un piccolo fastidio: tutti sono abituati al fatto che quando si scorre verso il basso il contenuto della pagina si sposta verso l'alto e viceversa, ma in Windows 10 è implementato in un modo del tutto insolito: il contenuto della pagina si sposta dopo scorrere, a cui è abbastanza difficile abituarsi. In tutti i forum in cui ho cercato una soluzione a questo problema, secondo le istruzioni, è necessario modificare il registro, cosa che può risultare difficile per molti utenti. Ma nella maggior parte dei casi può essere fatto più facilmente.

premi il bottone Inizio e scegli Opzioni , nella finestra che si apre, seleziona la sezione Dispositivi (Bluetooth, stampanti, mouse). Se il laptop è dotato del cosiddetto touchpad ad alta precisione, vedrai immediatamente un interruttore Cambia la direzione di scorrimento .

Ma la maggior parte dei laptop dispone di touchpad regolari, in questo caso fare clic sul collegamento Opzioni aggiuntive del mouse . Si aprirà una finestra Proprietà del mouse , in questo modo verrai indirizzato alla finestra delle impostazioni fornita dal produttore stesso del touchpad (il più delle volte è Synaptics)

premi il bottone Opzioni , vai alla scheda Scorrere

Qui è necessario deselezionare le caselle Direzione di cambio O Direzione di scorrimento (sono possibili altre opzioni, potrebbe essere diverso per i diversi modelli, ma dal nome capirai lo scopo) e fai clic su OK ovunque. Questo è tutto, puoi usare lo scorrimento nel solito modo.

I proprietari di netbook o laptop con uno schermo piccolo di soli 10 pollici, quando lavorano in qualsiasi applicazione, ad esempio in un browser Web o in un client di posta elettronica, spesso incontrano un problema quando è molto difficile "catturare" la barra di scorrimento, a causa di il fatto che quando la dimensione dello schermo è molto ridotta. Il problema si può risolvere, e molto facilmente, per farlo basta semplicemente espandere proprio questa barra di scorrimento.

Nella famiglia di sistemi operativi Windows c'è sicuramente una funzionalità molto utile che consente di personalizzare individualmente gli elementi del desktop. La barra di scorrimento non fa eccezione, sebbene in Windows XP e Windows 7 ciò avvenga in modo leggermente diverso.

Impostazione della barra di scorrimento in Windows XP

Larghezza predefinita della barra di scorrimento nel browser web Enternet Explorer 20 px, in Mozilla Firefox e Opera 15 px.

Per aumentare la larghezza della barra di scorrimento, fare clic con il tasto destro su uno spazio vuoto del Desktop e, nel menu contestuale che si apre, fare clic sulla voce "Proprietà", vai alla scheda "Arredamento" e premere il pulsante "Inoltre".

Nella finestra che si apre “Decorazione aggiuntiva” Nel capitolo "Elemento" aprire l'elenco a discesa e selezionare la riga " Barra di scorrimento"

Poi nella sezione “ Misurare" inserisci la larghezza della barra di scorrimento che ti è più comoda (la larghezza è impostata in pixel, in questo esempio l'ho impostata a 40px), clicca su "OK" e chiudi la finestra “Proprietà di visualizzazione” cliccando su “Applica” e “Ok”.

Ora apri il tuo browser web e assicurati che le modifiche apportate abbiano avuto effetto.

Penso che ci vorrebbe un grande sforzo per non notare una striscia così larga.

Impostazione della barra di scorrimento in Windows 7

Qui le cose sono un po’ diverse. Apri il menu contestuale del desktop, come descritto sopra, e vai su "Personalizzazione". Nella finestra che si apre, clicca su “Colore finestra” e segui il collegamento "Opzioni di progettazione avanzate."

Apparirà un'altra finestra in cui espandere l'elenco a discesa nella sezione "Elemento", seleziona la riga con l'iscrizione "Barra di scorrimento" e immettere la larghezza della barra di scorrimento richiesta.

Quindi fare clic sui pulsanti “Applica” e “Ok”. Chiudere la finestra “Opzioni di progettazione avanzate” facendo clic su "Salvare le modifiche" e da "x".

Apri il browser web e assicurati che la barra di scorrimento sia sufficientemente ampia.

In Windows 10, il valore di scorrimento predefinito per la rotellina del mouse è impostato automaticamente su 3. Se desideri aumentare o ottimizzare la velocità di scorrimento del mouse per semplificarti le cose, puoi personalizzarla in base alle tue esigenze. Vediamo come modificare la velocità di scorrimento del mouse in Windows 10.

Modifica della velocità di scorrimento del mouse
Molti mouse e touchpad avanzati dispongono di driver specializzati con molte opzioni aggiuntive visualizzate in schede separate nella finestra delle proprietà del mouse. Per configurare queste impostazioni, dovrai fare riferimento al manuale di istruzioni della tua attrezzatura. Altre caratteristiche di base del mouse possono essere personalizzate utilizzando le impostazioni dell'applicazione.

Innanzitutto, fai clic sul menu Start facendo clic sul pulsante Start nell'angolo in basso a sinistra dello schermo.

Quindi fare clic su Opzioni per aprire l'applicazione. Quando viene visualizzata l'applicazione delle impostazioni, fare clic su dispositivi.

Selezionare Mouse e touchpad pannello nel menu a sinistra per aprire la finestra delle impostazioni del mouse.

Dovresti vedere un cursore. Puoi usarlo per impostare quante righe la rotella di scorrimento deve saltare alla volta per ogni scorrimento. Tieni semplicemente premuto e trascina il cursore sul numero desiderato.

Per impostazione predefinita, il valore del dispositivo di scorrimento è già impostato su "3". Se necessario, puoi regolarlo per rispondere a qualsiasi sensibilità da 1 a 100. Se desideri inserire il valore della selezione della sensibilità della ruota, apri il collegamento in fondo alla pagina che dice: "Opzioni avanzate del mouse"

Quando viene visualizzata la finestra di dialogo del mouse, seleziona la scheda "Ruota" adiacente alle opzioni del puntatore nella finestra delle proprietà del mouse.

Nel campo visualizzato, inserisci il valore di sensibilità della rotella di scorrimento desiderato. Nella stessa finestra troverai un'opzione per collegare la rotella di scorrimento a "una pagina alla volta".

Per ogni scorrimento effettuato, la ruota salterà un'intera pagina di contenuto in una sola volta, invece di scorrerla riga per riga. Lo stesso può essere utilizzato anche per configurare le impostazioni per il cosiddetto "scorrimento orizzontale".

Oggi parleremo della barra di scorrimento della pagina. O meglio, del suo aspetto, che non è cambiato molto da diversi decenni. E io, proprio come te, sono piuttosto stanco di lei. Valuteremo quindi la possibilità di sostituirlo con il nostro.

Questa soluzione è molto comoda poiché qui non è coinvolto JavaScript. Il che a sua volta rimuove il carico sul sito. Tutto funziona utilizzando gli stili e ha un minimo di codice.

Installazione

Incolla questo codice in Foglio di stile (CSS)

::-pulsante-della-barra-di-scorrimento-webkit (
immagine di sfondo:url("");
larghezza: 5px;
altezza: 0px
}

::-webkit-scrollbar-traccia (
colore di sfondo:#ecedee
}

::-webkit-barra-di-scorrimento-pollice (
-webkit-border-raggio: 0px;
raggio del bordo: 0px;
colore di sfondo:#6dc0c8;
}

::-webkit-scrollbar-thumb:hover(
colore di sfondo:#56999f;
}

::-webkit-ridimensionatore(
immagine di sfondo:url("");
ripetizione in background: nessuna ripetizione;
larghezza: 4px;
altezza: 0px
}

::-webkit-barra di scorrimento(
larghezza: 4px;
}

L'installazione è ora completata. Ora scopriamo quale linea è responsabile di cosa.

Il colore della traccia lungo la quale si sposta la barra di scorrimento.

Cambia l'ecedee nel tuo colore.

::-webkit-scrollbar-traccia (
colore di sfondo:#ecedee
}

Il colore del cursore della striscia e la sua curvatura.

Cambia 6dc0c8 nel tuo colore.

Modificare il valore del raggio del bordo per l'arrotondamento.

::-webkit-barra-di-scorrimento-pollice (
-webkit-border-raggio: 0px;
raggio del bordo: 0px;
colore di sfondo:#6dc0c8;
}

Il colore del cursore quando ci passi sopra.

Cambia 56999f nel tuo colore.

::-webkit-barra-di-scorrimento-pollice (
-webkit-border-raggio: 0px;
raggio del bordo: 0px;
colore di sfondo:#6dc0c8;
}

La larghezza principale della barra di scorrimento.

Modifica del valore della larghezza

::-webkit-barra di scorrimento(
larghezza: 4px;
}

Esempio

Ad esempio, abbiamo realizzato una pergamena in questo stile:

Installa questo scroller sul tuo sito web semplicemente copiando il seguente codice:

200?"200px":""+(this.scrollHeight+5)+"px");"> ::-webkit-scrollbar-button (
immagine di sfondo:url("");
ripetizione in background: nessuna ripetizione;
larghezza: 6px;
altezza: 0px
}

::-webkit-scrollbar-traccia (
colore di sfondo:#32312e;
box-ombra:0px 0px 3px #000 inserto;
}

::-webkit-barra-di-scorrimento-pollice (
-raggio-bordo-webkit: 5px;
raggio del bordo: 5px;
colore di sfondo:#ffcb17;
box-shadow:0px 1px 1px #fff inserito;
background-image:url("https://site/_pu/24/59610063.png");
posizione-sfondo:centro;
ripetizione in background: nessuna ripetizione;
}

::-webkit-ridimensionatore(
immagine di sfondo:url("");
ripetizione in background: nessuna ripetizione;
larghezza:7px;
altezza: 0px
}

::-webkit-barra di scorrimento(
larghezza: 11px;
}

Quando si imposta lo scorrimento, è importante comprendere i seguenti punti:

1. La velocità di scorrimento del mouse esterno e del touchpad è controllata da diverse impostazioni.

2. Oltre alle impostazioni di sistema, la velocità di scorrimento può essere influenzata dalle impostazioni del browser, inclusi vari componenti aggiuntivi ed estensioni.

Quindi accedi Pannello di controllo e seleziona una sezione Topo:

Modifica della velocità di scorrimento del mouse

Vai alla scheda Ruota.

Scegli quante righe verranno spostate i contenuti scorrevoli uno passo della ruota (clic):

Modifica della velocità di scorrimento del touchpad

Per modificare i parametri del touchpad, il driver del dispositivo deve essere installato nel sistema. È sempre reperibile sul sito Web del produttore del laptop. Inoltre, ci affrettiamo a notare che Windows 8.1 è in grado di trovare e installare con successo i driver per i dispositivi più diffusi da solo tramite Internet. E il touchpad non fa eccezione. Nelle immagini sottostanti mostriamo come configurare il touchpad del produttore Synaptics fornito con il nostro portatile HP. Tutto quello che abbiamo fatto è stato installare Windows 8.1 con licenza e connetterci al router Wi-Fi. E dopo pochi minuti, il driver del touchpad richiesto è stato scaricato e installato insieme ai driver per altri dispositivi e agli aggiornamenti di Windows.

Pertanto, puoi cercare manualmente gli aggiornamenti e c'è un'alta probabilità che Windows scarichi il driver mancante:

Vai alla scheda Impostazioni del dispositivo.

Seleziona il tuo dispositivo nell'elenco.

Fare clic sul pulsante Opzioni:

Nella finestra delle impostazioni del dispositivo touch, vai alla sezione Scorrere.

Selezionare la velocità desiderata (nel nostro caso era necessario ridurla).

Clic Fare domanda a per salvare le modifiche:

Ho cambiato la velocità di scorrimento. Perché non cambia?

Se il tuo browser ha un'estensione per lo scorrimento fluido (ad esempio, SmoothScroll), le sue impostazioni hanno la precedenza su quelle del sistema. Pertanto, se dopo aver modificato le impostazioni del touchpad e del mouse non vedi alcuna modifica, controlla se tali componenti aggiuntivi sono installati nel tuo browser.

Dopo aver modificato le impostazioni di scorrimento nell'estensione, è necessario aggiornare la pagina del browser (F5) affinché le modifiche abbiano effetto.

Fare clic sul pulsante Menù.

Selezionare Strumenti aggiuntivi.

Clicca su Estensioni:

Trova l'estensione che ti serve nell'elenco e fai clic sul collegamento Opzioni sotto di lui:

Parlando nello specifico dell'estensione SmoothScroll, per modificare la velocità di scorrimento delle pagine web è necessario impostare nel campo il valore desiderato Dimensione del passo e premere il pulsante Salva le impostazioni Nella parte inferiore della pagina:

Come modificare la velocità del puntatore

L'impostazione della velocità del cursore è comune sia al touchpad che al dispositivo di puntamento esterno.

Vai alla scheda Opzioni del puntatore.

Selezionare una velocità confortevole utilizzando il quadrante.

I migliori articoli sull'argomento