From 4e3094556c4a4b483bc7aa574bbd452ed66b876c Mon Sep 17 00:00:00 2001 From: idrusma Date: Mon, 29 Mar 2021 12:12:02 +0200 Subject: [PATCH 01/12] Update 2-ui\1-document\10-size-and-scroll-window\article.md --- 2-ui/1-document/10-size-and-scroll-window/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/2-ui/1-document/10-size-and-scroll-window/article.md b/2-ui/1-document/10-size-and-scroll-window/article.md index 95a5cd48b..c69109f8f 100644 --- a/2-ui/1-document/10-size-and-scroll-window/article.md +++ b/2-ui/1-document/10-size-and-scroll-window/article.md @@ -1,8 +1,8 @@ -# Window sizes and scrolling +# Dimensioni e scorrimento della finestra del browser -How do we find the width and height of the browser window? How do we get the full width and height of the document, including the scrolled out part? How do we scroll the page using JavaScript? +Come scoprire la larghezza e l'altezza della finestra del browser? Come ricavare la larghezza e l'altezza totali del documento, incluse le parti fuori dall'area visibile di scorrimento? Come far scorrere la pagina tramite JavaScript? -For this type of information, we can use the root document element `document.documentElement`, that corresponds to the `` tag. But there are additional methods and peculiarities to consider. +Per questo genere di informazioni possiamo utilizzare l'elemento radice del documento `document.documentElement`, che corrisponde al tag ``. Ci sono, tuttavia, ulteriori metodi e peculiarità da considerare. ## Width/height of the window From e1bae9bd2131b3d87ff62d8daac5e86f579e8d24 Mon Sep 17 00:00:00 2001 From: Marcello Date: Mon, 29 Mar 2021 16:31:11 +0200 Subject: [PATCH 02/12] Update 2-ui\1-document\10-size-and-scroll-window\article.md --- .../10-size-and-scroll-window/article.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/2-ui/1-document/10-size-and-scroll-window/article.md b/2-ui/1-document/10-size-and-scroll-window/article.md index c69109f8f..6bffc6a82 100644 --- a/2-ui/1-document/10-size-and-scroll-window/article.md +++ b/2-ui/1-document/10-size-and-scroll-window/article.md @@ -4,24 +4,24 @@ Come scoprire la larghezza e l'altezza della finestra del browser? Come ricavare Per questo genere di informazioni possiamo utilizzare l'elemento radice del documento `document.documentElement`, che corrisponde al tag ``. Ci sono, tuttavia, ulteriori metodi e peculiarità da considerare. -## Width/height of the window +## Larghezza e altezza della finestra -To get window width and height, we can use the `clientWidth/clientHeight` of `document.documentElement`: +Per ottenere la larghezza e l'altezza della finestra, possiamo far uso delle proprietà `clientWidth/clientHeight` di `document.documentElement`: ![](document-client-width-height.svg) ```online -For instance, this button shows the height of your window: +Ad esempio questo pulsante mostra l'altezza della tua finestra: ``` -````warn header="Not `window.innerWidth/innerHeight`" -Browsers also support properties like `window.innerWidth/innerHeight`. They look like what we want, so why not to use them instead? +````warn header="Non usare `window.innerWidth/innerHeight`" +I browser supportano inoltre proprietà come `window.innerWidth/innerHeight`. Sembra che facciano al nostro caso, quindi perché non usare queste? -If there exists a scrollbar, and it occupies some space, `clientWidth/clientHeight` provide the width/height without it (subtract it). In other words, they return the width/height of the visible part of the document, available for the content. +Se esiste una barra di scorrimento ed occupa uno spazio, `clientWidth/clientHeight` forniscono la larghezza e l'altezza al netto della barra (la sottraggono). In altre parole restituiscono le dimensioni della parte visibile del documento disponibile per il contenuto. -`window.innerWidth/innerHeight` includes the scrollbar. +`window.innerWidth/innerHeight` includono la barra di scorrimento. If there's a scrollbar, and it occupies some space, then these two lines show different values: ```js run From e4ff94cfd82c72567998f2b0572fb7f370d0dbee Mon Sep 17 00:00:00 2001 From: idrusma Date: Tue, 30 Mar 2021 12:50:37 +0200 Subject: [PATCH 03/12] Update 2-ui\1-document\10-size-and-scroll-window\article.md --- .../10-size-and-scroll-window/article.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/2-ui/1-document/10-size-and-scroll-window/article.md b/2-ui/1-document/10-size-and-scroll-window/article.md index 6bffc6a82..54772c54e 100644 --- a/2-ui/1-document/10-size-and-scroll-window/article.md +++ b/2-ui/1-document/10-size-and-scroll-window/article.md @@ -21,24 +21,24 @@ I browser supportano inoltre proprietà come `window.innerWidth/innerHeight`. Se Se esiste una barra di scorrimento ed occupa uno spazio, `clientWidth/clientHeight` forniscono la larghezza e l'altezza al netto della barra (la sottraggono). In altre parole restituiscono le dimensioni della parte visibile del documento disponibile per il contenuto. -`window.innerWidth/innerHeight` includono la barra di scorrimento. +`window.innerWidth/innerHeight` includono invece la barra di scorrimento. -If there's a scrollbar, and it occupies some space, then these two lines show different values: +Se la barra di scorrimento è presente ed occupa uno spazio, allora queste due linee di codice mostreranno dei valori differenti: ```js run -alert( window.innerWidth ); // full window width -alert( document.documentElement.clientWidth ); // window width minus the scrollbar +alert( window.innerWidth ); // larghezza della finestra comprensiva di barra di scorrimento +alert( document.documentElement.clientWidth ); // larghezza della finestra barra esclusa ``` -In most cases, we need the *available* window width in order to draw or position something within scrollbars (if there are any), so we should use `documentElement.clientHeight/clientWidth`. +Nella maggior parte dei casi abbiamo bisogno della larghezza delle finestra *disponibile* per disegnare o posizionare qualcosa all'interno delle barre di scorrimento (se presenti), quindi dovremmo usare `documentElement.clientHeight/clientWidth`. ```` -```warn header="`DOCTYPE` is important" -Please note: top-level geometry properties may work a little bit differently when there's no `` in HTML. Odd things are possible. +```warn header="Il `DOCTYPE` è importante" +Si noti che le proprietà geometriche ad alto livello possono funzionare in modo leggermente differente se non c'è `` nell'HTML. Si potrebbero verificare comportamenti imprevedibili. -In modern HTML we should always write `DOCTYPE`. +Nell'HTML moderno dovremmo sempre indicare il `DOCTYPE`. ``` -## Width/height of the document +## Larghezza e altezza del documento Theoretically, as the root document element is `document.documentElement`, and it encloses all the content, we could measure the document's full size as `document.documentElement.scrollWidth/scrollHeight`. From 227880a9a42511f03d3afc30132f8e4a42084114 Mon Sep 17 00:00:00 2001 From: idrusma Date: Tue, 30 Mar 2021 12:55:07 +0200 Subject: [PATCH 04/12] Update 2-ui\1-document\10-size-and-scroll-window\article.md --- 2-ui/1-document/10-size-and-scroll-window/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/1-document/10-size-and-scroll-window/article.md b/2-ui/1-document/10-size-and-scroll-window/article.md index 54772c54e..b1d0dab66 100644 --- a/2-ui/1-document/10-size-and-scroll-window/article.md +++ b/2-ui/1-document/10-size-and-scroll-window/article.md @@ -21,7 +21,7 @@ I browser supportano inoltre proprietà come `window.innerWidth/innerHeight`. Se Se esiste una barra di scorrimento ed occupa uno spazio, `clientWidth/clientHeight` forniscono la larghezza e l'altezza al netto della barra (la sottraggono). In altre parole restituiscono le dimensioni della parte visibile del documento disponibile per il contenuto. -`window.innerWidth/innerHeight` includono invece la barra di scorrimento. +Le proprietà `window.innerWidth/innerHeight` includono invece la barra di scorrimento. Se la barra di scorrimento è presente ed occupa uno spazio, allora queste due linee di codice mostreranno dei valori differenti: ```js run @@ -29,7 +29,7 @@ alert( window.innerWidth ); // larghezza della finestra comprensiva di barra di alert( document.documentElement.clientWidth ); // larghezza della finestra barra esclusa ``` -Nella maggior parte dei casi abbiamo bisogno della larghezza delle finestra *disponibile* per disegnare o posizionare qualcosa all'interno delle barre di scorrimento (se presenti), quindi dovremmo usare `documentElement.clientHeight/clientWidth`. +Nella maggior parte dei casi abbiamo bisogno della larghezza della finestra *disponibile* per disegnare o posizionare qualcosa all'interno delle barre di scorrimento (se presenti), quindi dovremmo usare `documentElement.clientHeight/clientWidth`. ```` ```warn header="Il `DOCTYPE` è importante" From c9febc46152834b42b8cd9aa776b9b999249214d Mon Sep 17 00:00:00 2001 From: Marcello Date: Tue, 30 Mar 2021 16:47:30 +0200 Subject: [PATCH 05/12] Update 2-ui\1-document\10-size-and-scroll-window\article.md --- 2-ui/1-document/10-size-and-scroll-window/article.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/2-ui/1-document/10-size-and-scroll-window/article.md b/2-ui/1-document/10-size-and-scroll-window/article.md index b1d0dab66..43741dbd3 100644 --- a/2-ui/1-document/10-size-and-scroll-window/article.md +++ b/2-ui/1-document/10-size-and-scroll-window/article.md @@ -40,11 +40,11 @@ Nell'HTML moderno dovremmo sempre indicare il `DOCTYPE`. ## Larghezza e altezza del documento -Theoretically, as the root document element is `document.documentElement`, and it encloses all the content, we could measure the document's full size as `document.documentElement.scrollWidth/scrollHeight`. +Teoricamente, poiché l'elemento radice del documento è `document.documentElement` e racchiude tutto il contenuto, potremmo misurare le dimensioni totali del documento con `document.documentElement.scrollWidth/scrollHeight`. -But on that element, for the whole page, these properties do not work as intended. In Chrome/Safari/Opera, if there's no scroll, then `documentElement.scrollHeight` may be even less than `documentElement.clientHeight`! Weird, right? +Ma su questo elemento, per l'intera pagina, queste proprietà non funzionano come dovrebbero. In Chrome/Safari/Opera, nel caso in cui non ci sia barra di scorrimento, `documentElement.scrollHeight` può essere anche minore di `documentElement.clientHeight`! Strano, no? -To reliably obtain the full document height, we should take the maximum of these properties: +Per ottenere l'altezza totale del documento in modo affidabile, dovremmo scegliere il valore maggiore tra queste proprietà: ```js run let scrollHeight = Math.max( @@ -53,12 +53,12 @@ let scrollHeight = Math.max( document.body.clientHeight, document.documentElement.clientHeight ); -alert('Full document height, with scrolled out part: ' + scrollHeight); +alert("Altezza totale del documento, compresa la parte fuori dall'area visibile di scorrimento: " + scrollHeight); ``` -Why so? Better don't ask. These inconsistencies come from ancient times, not a "smart" logic. +Perché così? Meglio non chiedere. Queste incongruenze provengono da tempi lontani, non c'è alcuna logica. -## Get the current scroll [#page-scroll] +## Ottenere il valore corrente dello scorrimento [#page-scroll] DOM elements have their current scroll state in their `scrollLeft/scrollTop` properties. From f8e38b9fc7d8331ddad7a9cb0ea5c868b23cf118 Mon Sep 17 00:00:00 2001 From: Marcello Date: Tue, 30 Mar 2021 19:32:21 +0200 Subject: [PATCH 06/12] Update 2-ui\1-document\10-size-and-scroll-window\article.md --- .../10-size-and-scroll-window/article.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/2-ui/1-document/10-size-and-scroll-window/article.md b/2-ui/1-document/10-size-and-scroll-window/article.md index 43741dbd3..bbc436a57 100644 --- a/2-ui/1-document/10-size-and-scroll-window/article.md +++ b/2-ui/1-document/10-size-and-scroll-window/article.md @@ -58,22 +58,22 @@ alert("Altezza totale del documento, compresa la parte fuori dall'area visibile Perché così? Meglio non chiedere. Queste incongruenze provengono da tempi lontani, non c'è alcuna logica. -## Ottenere il valore corrente dello scorrimento [#page-scroll] +## Ottenere il valore corrente di scorrimento [#page-scroll] -DOM elements have their current scroll state in their `scrollLeft/scrollTop` properties. +Gli elementi DOM memorizzano lo stato corrente dei valori di scorrimento nelle loro proprietà `scrollLeft/scrollTop`. -For document scroll, `document.documentElement.scrollLeft/scrollTop` works in most browsers, except older WebKit-based ones, like Safari (bug [5991](https://bugs.webkit.org/show_bug.cgi?id=5991)), where we should use `document.body` instead of `document.documentElement`. +Per lo scorrimento del documento, `document.documentElement.scrollLeft/scrollTop` funzionano sulla maggioranza dei browser, ad eccezione di quelli più vecchi basati su WebKit, come Safari (bug [5991](https://bugs.webkit.org/show_bug.cgi?id=5991)), dove dovremmo usare `document.body` al posto di `document.documentElement`. -Luckily, we don't have to remember these peculiarities at all, because the scroll is available in the special properties, `window.pageXOffset/pageYOffset`: +Fortunatamente, non dobbiamo ricordare affatto queste peculiarità, perché lo scorrimento del documento è disponibile anche nelle speciali proprietà `window.pageXOffset/pageYOffset`: ```js run -alert('Current scroll from the top: ' + window.pageYOffset); -alert('Current scroll from the left: ' + window.pageXOffset); +alert("Scorrimento corrente dall'alto: " + window.pageYOffset); +alert('Scorrimento corrente da sinistra: ' + window.pageXOffset); ``` -These properties are read-only. +Queste proprietà sono in sola lettura. -## Scrolling: scrollTo, scrollBy, scrollIntoView [#window-scroll] +## Lo scorrimento con scrollTo, scrollBy, scrollIntoView [#window-scroll] ```warn To scroll the page with JavaScript, its DOM must be fully built. From c25f94de694a43d374f958373dbae92dd5db0cf6 Mon Sep 17 00:00:00 2001 From: idrusma Date: Wed, 31 Mar 2021 12:19:06 +0200 Subject: [PATCH 07/12] Update 2-ui\1-document\10-size-and-scroll-window\article.md --- .../10-size-and-scroll-window/article.md | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/2-ui/1-document/10-size-and-scroll-window/article.md b/2-ui/1-document/10-size-and-scroll-window/article.md index bbc436a57..9fbaf87a5 100644 --- a/2-ui/1-document/10-size-and-scroll-window/article.md +++ b/2-ui/1-document/10-size-and-scroll-window/article.md @@ -76,33 +76,33 @@ Queste proprietà sono in sola lettura. ## Lo scorrimento con scrollTo, scrollBy, scrollIntoView [#window-scroll] ```warn -To scroll the page with JavaScript, its DOM must be fully built. +Per scorrere la pagina con JavaScript, il DOM deve essere stato completamente elaborato. -For instance, if we try to scroll the page with a script in ``, it won't work. +Se proviamo, ad esempio, a scorrere la pagina con uno script nella sezione ``, non funzionerà. ``` -Regular elements can be scrolled by changing `scrollTop/scrollLeft`. +I normali elementi possono essere fatti scorrere modificando `scrollTop/scrollLeft`. -We can do the same for the page using `document.documentElement.scrollTop/scrollLeft` (except Safari, where `document.body.scrollTop/Left` should be used instead). +Possiamo applicare lo stesso principio per la pagina usando `document.documentElement.scrollTop/scrollLeft` (tranne che per Safari, con il quale dovremmo usare invece `document.body.scrollTop/Left`). -Alternatively, there's a simpler, universal solution: special methods [window.scrollBy(x,y)](mdn:api/Window/scrollBy) and [window.scrollTo(pageX,pageY)](mdn:api/Window/scrollTo). +In alternativa, c'è una soluzione più semplice ed universale: i metodi speciali [window.scrollBy(x,y)](mdn:api/Window/scrollBy) e [window.scrollTo(pageX,pageY)](mdn:api/Window/scrollTo). -- The method `scrollBy(x,y)` scrolls the page *relative to its current position*. For instance, `scrollBy(0,10)` scrolls the page `10px` down. +- Il metodo `scrollBy(x,y)` scorre la pagina *in base alla sua posizione corrente*. Per esempio, `scrollBy(0,10)` scorre la pagina di `10px` in basso. ```online - The button below demonstrates this: + Il pulsante in basso dimostra quanto appena affermato: ``` -- The method `scrollTo(pageX,pageY)` scrolls the page *to absolute coordinates*, so that the top-left corner of the visible part has coordinates `(pageX, pageY)` relative to the document's top-left corner. It's like setting `scrollLeft/scrollTop`. +- Il metodo `scrollTo(pageX,pageY)` scorre la pagina *in base alle coordinate assolute*, di modo che l'angolo superiore sinistro della parte visibile abbia le coordinate `(pageX, pageY)` relative all'angolo superiore sinistro del documento. Di fatto, è come agire sulle proprietà `scrollLeft/scrollTop`. - To scroll to the very beginning, we can use `scrollTo(0,0)`. + Per scorrere fino all'inizio possiamo usare `scrollTo(0,0)`. ```online ``` -These methods work for all browsers the same way. +Questi metodo godono di un supporto universale da parte di tutti i browser. ## scrollIntoView @@ -145,7 +145,7 @@ The drawback of the method is that the scrollbar disappears. If it occupied some That looks a bit odd, but can be worked around if we compare `clientWidth` before and after the freeze. If it increased (the scrollbar disappeared), then add `padding` to `document.body` in place of the scrollbar to keep the content width the same. -## Summary +## Riepilogo Geometry: From 38d5c8ad93ac0f130109bd1c4091996951ea347f Mon Sep 17 00:00:00 2001 From: idrusma Date: Wed, 31 Mar 2021 13:17:27 +0200 Subject: [PATCH 08/12] Update 2-ui\1-document\10-size-and-scroll-window\article.md --- .../10-size-and-scroll-window/article.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/2-ui/1-document/10-size-and-scroll-window/article.md b/2-ui/1-document/10-size-and-scroll-window/article.md index 9fbaf87a5..0ffc6690f 100644 --- a/2-ui/1-document/10-size-and-scroll-window/article.md +++ b/2-ui/1-document/10-size-and-scroll-window/article.md @@ -56,11 +56,11 @@ let scrollHeight = Math.max( alert("Altezza totale del documento, compresa la parte fuori dall'area visibile di scorrimento: " + scrollHeight); ``` -Perché così? Meglio non chiedere. Queste incongruenze provengono da tempi lontani, non c'è alcuna logica. +Perché così? Meglio non chiedere. Queste incongruenze derivano da tempi lontani, non c'è alcuna logica. ## Ottenere il valore corrente di scorrimento [#page-scroll] -Gli elementi DOM memorizzano lo stato corrente dei valori di scorrimento nelle loro proprietà `scrollLeft/scrollTop`. +Gli elementi DOM memorizzano lo stato corrente dei loro valori di scorrimento nelle proprietà `scrollLeft/scrollTop`. Per lo scorrimento del documento, `document.documentElement.scrollLeft/scrollTop` funzionano sulla maggioranza dei browser, ad eccezione di quelli più vecchi basati su WebKit, come Safari (bug [5991](https://bugs.webkit.org/show_bug.cgi?id=5991)), dove dovremmo usare `document.body` al posto di `document.documentElement`. @@ -106,37 +106,37 @@ Questi metodo godono di un supporto universale da parte di tutti i browser. ## scrollIntoView -For completeness, let's cover one more method: [elem.scrollIntoView(top)](mdn:api/Element/scrollIntoView). +Per completezza trattiamo anche il metodo [elem.scrollIntoView(top)](mdn:api/Element/scrollIntoView). -The call to `elem.scrollIntoView(top)` scrolls the page to make `elem` visible. It has one argument: +L'esecuzione di `elem.scrollIntoView(top)` scorre la pagina in modo da rendere visibile `elem`. Ha un solo argomento: -- If `top=true` (that's the default), then the page will be scrolled to make `elem` appear on the top of the window. The upper edge of the element will be aligned with the window top. -- If `top=false`, then the page scrolls to make `elem` appear at the bottom. The bottom edge of the element will be aligned with the window bottom. +- Se `top=true` (è il valore predefinito), allora la pagina sarà fatta scorrere in modo che `elem` appaia nella parte alta della finestra. Il bordo superiore dell'elemento sarà allineato con la parte superiore della finestra. +- Se `top=false`, allora la pagina scorre così che `elem` appaia in basso. Il bordo inferiore dell'elemento sarà allineato con il bordo inferiore della finestra. ```online -The button below scrolls the page to position itself at the window top: +Il pulsante in basso scorre la pagina in modo da allinearsi con il bordo superiore della finestra: -And this button scrolls the page to position itself at the bottom: +Questo pulsante, invece, si allinea con il bordo inferiore: ``` -## Forbid the scrolling +## Impedire lo scorrimento -Sometimes we need to make the document "unscrollable". For instance, when we need to cover the page with a large message requiring immediate attention, and we want the visitor to interact with that message, not with the document. +Talvolta si pone la necessità di impedire lo scorrimento del documento. Per esempio in presenza di un messaggio che ricopre l'intera larghezza della pagina e che richiede immediata attenzione. In quel caso desideriamo che il visitatore interagisca prima con quel messaggio, non con il documento. -To make the document unscrollable, it's enough to set `document.body.style.overflow = "hidden"`. The page will "freeze" at its current scroll position. +Per impedire lo scorrimento, è sufficiente ricorrere a `document.body.style.overflow = "hidden"`. La pagina rimarrà "congelata" nella sua posizione corrente di scorrimento. ```online -Try it: +Prova: -The first button freezes the scroll, while the second one releases it. +Il primo pulsante congela lo scorrimento, il secondo invece lo ripristina. ``` We can use the same technique to freeze the scroll for other elements, not just for `document.body`. From ef90b1b304dcd38891e17d8b3bcfc11fd7958c47 Mon Sep 17 00:00:00 2001 From: Marcello Date: Wed, 31 Mar 2021 15:11:28 +0200 Subject: [PATCH 09/12] Update 2-ui\1-document\10-size-and-scroll-window\article.md --- .../10-size-and-scroll-window/article.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/2-ui/1-document/10-size-and-scroll-window/article.md b/2-ui/1-document/10-size-and-scroll-window/article.md index 0ffc6690f..6ca867d4d 100644 --- a/2-ui/1-document/10-size-and-scroll-window/article.md +++ b/2-ui/1-document/10-size-and-scroll-window/article.md @@ -139,18 +139,18 @@ Prova: Il primo pulsante congela lo scorrimento, il secondo invece lo ripristina. ``` -We can use the same technique to freeze the scroll for other elements, not just for `document.body`. +Possiamo usare la stessa tecnica per congelare lo scorrimento anche di altri elementi, non solo di `document.body`. -The drawback of the method is that the scrollbar disappears. If it occupied some space, then that space is now free and the content "jumps" to fill it. +L'inconveniente di questo approccio è che scompare la barra di scorrimento. Se questa occupava uno spazio, allora quello spazio si libererà ed il contenuto si adatterà bruscamente per riempirlo. -That looks a bit odd, but can be worked around if we compare `clientWidth` before and after the freeze. If it increased (the scrollbar disappeared), then add `padding` to `document.body` in place of the scrollbar to keep the content width the same. +Può sembrare un po' strano, ma possiamo aggirare il problema se mettiamo a paragone il valore di `clientWidth` prima e dopo il congelamento. Se aumenta (la barra di scorrimento è scomparsa), allora aggiungiamo `padding` a `document.body` al posto della barra per mantenere la larghezza del contenuto inalterata. ## Riepilogo -Geometry: +Proprietà geometriche: -- Width/height of the visible part of the document (content area width/height): `document.documentElement.clientWidth/clientHeight` -- Width/height of the whole document, with the scrolled out part: +- Larghezza/altezza della parte visibile del documento (larghezza/altezza dell'area del contenuto): `document.documentElement.clientWidth/clientHeight` +- Larghezza/altezza dell'intero documento, comprese le parti fuori dall'area visibile di scorrimento: ```js let scrollHeight = Math.max( @@ -160,7 +160,7 @@ Geometry: ); ``` -Scrolling: +Scorrimento: - Read the current scroll: `window.pageYOffset/pageXOffset`. - Change the current scroll: From 8b7b24eea5468290d095a6f60f70144a09b0ce8c Mon Sep 17 00:00:00 2001 From: Marcello Date: Wed, 31 Mar 2021 15:25:25 +0200 Subject: [PATCH 10/12] Update 2-ui\1-document\10-size-and-scroll-window\article.md --- 2-ui/1-document/10-size-and-scroll-window/article.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/2-ui/1-document/10-size-and-scroll-window/article.md b/2-ui/1-document/10-size-and-scroll-window/article.md index 6ca867d4d..6135bb4f7 100644 --- a/2-ui/1-document/10-size-and-scroll-window/article.md +++ b/2-ui/1-document/10-size-and-scroll-window/article.md @@ -162,9 +162,9 @@ Proprietà geometriche: Scorrimento: -- Read the current scroll: `window.pageYOffset/pageXOffset`. -- Change the current scroll: +- Leggere il valore di scorrimento corrente: `window.pageYOffset/pageXOffset`. +- Modificare il valore di scorrimento corrente: - - `window.scrollTo(pageX,pageY)` -- absolute coordinates, - - `window.scrollBy(x,y)` -- scroll relative the current place, - - `elem.scrollIntoView(top)` -- scroll to make `elem` visible (align with the top/bottom of the window). + - `window.scrollTo(pageX,pageY)` -- scorre la pagina in base a coordinate assolute, + - `window.scrollBy(x,y)` -- scorre la pagina in base alla sua posizione corrente, + - `elem.scrollIntoView(top)` -- scorre la pagina per rendere visibile `elem` (allineato al bordo superiore o inferiore della finestra). From da75b28650cb0059bad98947b0b5ca29ee635933 Mon Sep 17 00:00:00 2001 From: Marcello Date: Fri, 2 Apr 2021 07:51:19 +0200 Subject: [PATCH 11/12] Review 2-ui\1-document\10-size-and-scroll-window\article.md --- 2-ui/1-document/10-size-and-scroll-window/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/1-document/10-size-and-scroll-window/article.md b/2-ui/1-document/10-size-and-scroll-window/article.md index 6135bb4f7..e163c30a1 100644 --- a/2-ui/1-document/10-size-and-scroll-window/article.md +++ b/2-ui/1-document/10-size-and-scroll-window/article.md @@ -162,8 +162,8 @@ Proprietà geometriche: Scorrimento: -- Leggere il valore di scorrimento corrente: `window.pageYOffset/pageXOffset`. -- Modificare il valore di scorrimento corrente: +- Legge il valore di scorrimento corrente: `window.pageYOffset/pageXOffset`. +- Modifica il valore di scorrimento corrente: - `window.scrollTo(pageX,pageY)` -- scorre la pagina in base a coordinate assolute, - `window.scrollBy(x,y)` -- scorre la pagina in base alla sua posizione corrente, From e7efb9617860103ae367b79afd5e0efb085edca8 Mon Sep 17 00:00:00 2001 From: marcellosurdi <42266628+marcellosurdi@users.noreply.github.com> Date: Thu, 8 Apr 2021 08:42:54 +0200 Subject: [PATCH 12/12] Apply suggestions from code review Co-authored-by: Andrea <45577511+longo-andrea@users.noreply.github.com> --- 2-ui/1-document/10-size-and-scroll-window/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/1-document/10-size-and-scroll-window/article.md b/2-ui/1-document/10-size-and-scroll-window/article.md index e163c30a1..138812f75 100644 --- a/2-ui/1-document/10-size-and-scroll-window/article.md +++ b/2-ui/1-document/10-size-and-scroll-window/article.md @@ -17,7 +17,7 @@ Ad esempio questo pulsante mostra l'altezza della tua finestra: ``` ````warn header="Non usare `window.innerWidth/innerHeight`" -I browser supportano inoltre proprietà come `window.innerWidth/innerHeight`. Sembra che facciano al nostro caso, quindi perché non usare queste? +I browser supportano inoltre proprietà come `window.innerWidth/innerHeight`. Sembra che facciano al nostro caso, quindi perché non dovremmo usarle? Se esiste una barra di scorrimento ed occupa uno spazio, `clientWidth/clientHeight` forniscono la larghezza e l'altezza al netto della barra (la sottraggono). In altre parole restituiscono le dimensioni della parte visibile del documento disponibile per il contenuto. @@ -81,7 +81,7 @@ Per scorrere la pagina con JavaScript, il DOM deve essere stato completamente el Se proviamo, ad esempio, a scorrere la pagina con uno script nella sezione ``, non funzionerà. ``` -I normali elementi possono essere fatti scorrere modificando `scrollTop/scrollLeft`. +Gli elementi normali possono essere fatti scorrere modificando `scrollTop/scrollLeft`. Possiamo applicare lo stesso principio per la pagina usando `document.documentElement.scrollTop/scrollLeft` (tranne che per Safari, con il quale dovremmo usare invece `document.body.scrollTop/Left`). pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy