Update 2-ui\1-document\09-size-and-scroll\article.md

marcellosurdi · marcellosurdi · commit 516abffff87a · 2021-03-27T02:35:12.000+01:00
diff --git a/2-ui/1-document/09-size-and-scroll/article.md b/2-ui/1-document/09-size-and-scroll/article.md
@@ -37,7 +37,7 @@ L'immagine sopra rappresenta il caso più complesso in cui l'elemento ha una bar
 Senza la barra di scorrimento, pertanto, l'area del contenuto sarebbe `300px`, ma se la barra di scorrimento è larga `16px` (la larghezza è variabile in base al dispositivo ed al browser) allora rimane soltanto `300 - 16 = 284px`, ed è questa la misura che dovremmo tenere in considerazione. Ecco perché gli esempi di questo capitolo presumono che ci sia una barra di scorrimento. Senza questa, alcuni calcoli sono più semplici.
 ```
 
-```smart header="L'area del `padding-bottom` può essere riempita dal testo"
+```smart header="L'area del `padding-bottom` può essere occupata dal testo"
 Di solito gli spazi definiti dai padding sono rappresentati vuoti nelle immagini, ma se nell'elemento c'è molto testo ed eccede l'area del contenuto, in quel caso è normale che il browser mostri il testo eccedente nel `padding-bottom`.
 ```
 
@@ -84,7 +84,7 @@ Nell'esempio di seguito il `<div>` interno ha `<main>` come `offsetParent` e `of
 
 Ci sono alcune circostanze in cui `offsetParent` è `null`:
 
-1. Per gli elementi nascosti (`display:none` oppure non inserito nel documento).
+1. Per gli elementi nascosti (`display:none` oppure non inseriti nel documento).
 2. Per `<body>` e `<html>`.
 3. Per gli elementi con `position:fixed`.
 
@@ -166,26 +166,26 @@ In assenza di padding, dunque, possiamo usare `clientWidth/clientHeight` per ric
 
 ## scrollWidth/Height
 
-Queste proprietà sono come `clientWidth/clientHeight`, ma includono anche le parti nascoste dallo scorrimento:
+Queste proprietà sono come `clientWidth/clientHeight`, ma includono anche le parti fuori dall'area visibile di scorrimento (non visibili):
 
 ![](metric-scroll-width-height.svg)
 
-On the picture above:
+Nell'immagine sopra:
 
-- `scrollHeight = 723` -- is the full inner height of the content area including the scrolled out parts.
-- `scrollWidth = 324` -- is the full inner width, here we have no horizontal scroll, so it equals `clientWidth`.
+- `scrollHeight = 723` -- è l'intera altezza del contenuto includendo le parti fuori dall'area visibile di scorrimento.
+- `scrollWidth = 324` -- è l'intera larghezza, dal momento che non c'è barra di scorrimento orizzontale equivale a `clientWidth`.
 
-We can use these properties to expand the element wide to its full width/height.
+Possiamo servirci di queste proprietà per espandere l'elemento fino alla sua larghezza/altezza completa.
 
-Like this:
+In questo modo:
 
 ```js
-// expand the element to the full content height
+// espande l'elemento fino alla sua altezza completa
 element.style.height = `${element.scrollHeight}px`;
 ```
 
 ```online
-Click the button to expand the element:
+Premi il pulsante per espandere l'elemento:
 
 <div id="element" style="width:300px;height:200px; padding: 0;overflow: auto; border:1px solid black;">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
 
@@ -194,27 +194,27 @@ Click the button to expand the element:
 
 ## scrollLeft/scrollTop
 
-Properties `scrollLeft/scrollTop` are the width/height of the hidden, scrolled out part of the element.
+Le proprietà `scrollLeft/scrollTop` sono la larghezza/altezza delle parti di un elemento nascoste e fuori dall'area visibile di scorrimento.
 
-On the picture below we can see `scrollHeight` and `scrollTop` for a block with a vertical scroll.
+Nell'immagine sotto possiamo osservare la rappresentazione di `scrollHeight` e `scrollTop` per un blocco soggetto a scorrimento verticale.
 
 ![](metric-scroll-top.svg)
 
-In other words, `scrollTop` is "how much is scrolled up".
+In altre parole, con `scrollTop` si intende "quanto l'elemento è stato fatto scorrere verso l'alto".
 
-````smart header="`scrollLeft/scrollTop` can be modified"
-Most of the geometry properties here are read-only, but `scrollLeft/scrollTop` can be changed, and the browser will scroll the element.
+````smart header="`scrollLeft/scrollTop` possono essere modificate"
+La maggior parte delle proprietà geometriche trattate sono in sola lettura, ma `scrollLeft/scrollTop` possono essere modificate, e il browser farà scorrere l'elemento.
 
 ```online
-If you click the element below, the code `elem.scrollTop += 10` executes. That makes the element content scroll `10px` down.
+Nell'elemento sottostante ogni clic esegue il codice `elem.scrollTop += 10`. Ciò comporta che il contenuto dell'elemento scorre verso il basso di `10px`.
 
 <div onclick="this.scrollTop+=10" style="cursor:pointer;border:1px solid black;width:100px;height:80px;overflow:auto">Click<br>Me<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div>
 ```
 
-Setting `scrollTop` to `0` or a big value, such as `1e9` will make the element scroll to the very top/bottom respectively.
+Impostare `scrollTop` a `0` o su un grande valore, come `1e9`, farà sì che l'elemento scorrerà rispettivamente verso l'estremità superiore o inferiore.
 ````
 
-## Don't take width/height from CSS
+## Non ricavare la larghezza o l'altezza dai CSS
 
 We've just covered geometry properties of DOM elements, that can be used to get widths, heights and calculate distances.
 
@@ -261,16 +261,16 @@ On a Desktop Windows OS, Firefox, Chrome, Edge all reserve the space for the scr
 
 Please note that the described difference is only about reading `getComputedStyle(...).width` from JavaScript, visually everything is correct.
 
-## Summary
+## Riepilogo
 
-Elements have the following geometry properties:
+Gli elementi hanno le seguenti proprietà geometriche:
 
-- `offsetParent` -- is the nearest positioned ancestor or `td`, `th`, `table`, `body`.
-- `offsetLeft/offsetTop` -- coordinates relative to the upper-left edge of `offsetParent`.
-- `offsetWidth/offsetHeight` -- "outer" width/height of an element including borders.
-- `clientLeft/clientTop` -- the distances from the upper-left outer corner to the upper-left inner (content + padding) corner. For left-to-right OS they are always the widths of left/top borders. For right-to-left OS the vertical scrollbar is on the left so `clientLeft` includes its width too.
-- `clientWidth/clientHeight` -- the width/height of the content including paddings, but without the scrollbar.
-- `scrollWidth/scrollHeight` -- the width/height of the content, just like `clientWidth/clientHeight`, but also include scrolled-out, invisible part of the element.
-- `scrollLeft/scrollTop` -- width/height of the scrolled out upper part of the element, starting from its upper-left corner.
+- `offsetParent` -- è l'antenato più vicino posizionato (cioè con proprietà `position` diversa da `static`), oppure `td`, `th`, `table`, `body`.
+- `offsetLeft/offsetTop` -- le coordinate relative all'angolo in alto a sinistra di `offsetParent`.
+- `offsetWidth/offsetHeight` -- la larghezza/altezza "esterne" di un elemento bordi inclusi.
+- `clientLeft/clientTop` -- le distanze dell'angolo esterno superiore sinistro dall'angolo interno (contenuto + padding) superiore sinistro. Per le lingue da sinistra verso destra corrispondono sempre alla larghezza dei bordi superiore e sinistro. Per le lingue da destra verso sinistra la barra di scorrimento verticale è a sinistra, quindi `clientLeft` include anche la larghezza della barra.
+- `clientWidth/clientHeight` -- la larghezza/altezza del contenuto, padding inclusi ma senza la barra di scorrimento.
+- `scrollWidth/scrollHeight` -- la larghezza/altezza del contenuto, proprio come `clientWidth/clientHeight`, ma comprende anche la parte di un elemento nascosta e fuori dall'area visibile di scorrimento.
+- `scrollLeft/scrollTop` -- la larghezza/altezza della parte superiore di un elemento fuori dall'area visibile di scorrimento, partendo dal suo angolo in alto a sinistra.
 
-All properties are read-only except `scrollLeft/scrollTop` that make the browser scroll the element if changed.
+Tutte le proprietà sono in sola lettura tranne `scrollLeft/scrollTop` che che fanno scorrere l'elemento nel browser se modificate.
