|
2 | 2 |
|
3 | 3 | Per spostare gli elementi dovremmo conoscere bene le coordinate. |
4 | 4 |
|
5 | | -Most JavaScript methods deal with one of two coordinate systems: |
| 5 | +La gran parte dei metodi JavaScript ha a che fare con uno di questi due sistemi di coordinate: |
6 | 6 |
|
7 | | -1. **Relative to the window** - similar to `position:fixed`, calculated from the window top/left edge. |
8 | | - - we'll denote these coordinates as `clientX/clientY`, the reasoning for such name will become clear later, when we study event properties. |
9 | | -2. **Relative to the document** - similar to `position:absolute` in the document root, calculated from the document top/left edge. |
10 | | - - we'll denote them `pageX/pageY`. |
| 7 | +1. **Coordinate relative alla finestra** - paragonabili a `position:fixed`, calcolate dal bordo superiore sinistro della finestra. |
| 8 | + - indicheremo queste coordinate con `clientX/clientY`, il ragionamento per tale nome diventerà evidente in seguito, quando studieremo le proprietà degli eventi. |
| 9 | +2. **Coordinate relative al documento** - paragonabili a `position:absolute` quando riferita alla radice del documento, calcolate dal bordo superiore sinistro del documento. |
| 10 | + - le indicheremo con `pageX/pageY`. |
11 | 11 |
|
12 | | -When the page is scrolled to the very beginning, so that the top/left corner of the window is exactly the document top/left corner, these coordinates equal each other. But after the document shifts, window-relative coordinates of elements change, as elements move across the window, while document-relative coordinates remain the same. |
| 12 | +Quando la pagina è al suo inizio, così che l'angolo superiore sinistro della finestra coincide esattamente con l'angolo superiore sinistro del documento, queste coordinate sono uguali tra loro. Ma dopo che si scorre la pagina, le coordinate relative alla finestra cambiano via via che gli elementi si spostano all'interno di questa, mentre le coordinate relative al documento rimangono invariate. |
13 | 13 |
|
14 | | -On this picture we take a point in the document and demonstrate its coordinates before the scroll (left) and after it (right): |
| 14 | +In questa immagine consideriamo un punto nel documento e mostriamo le sue coordinate prima dello scorrimento (riquadro a sinistra) e dopo di esso (riquadro a destra): |
15 | 15 |
|
16 | 16 |  |
17 | 17 |
|
18 | | -When the document scrolled: |
19 | | -- `pageY` - document-relative coordinate stayed the same, it's counted from the document top (now scrolled out). |
20 | | -- `clientY` - window-relative coordinate did change (the arrow became shorter), as the same point became closer to window top. |
| 18 | +Quando il documento scorre: |
| 19 | +- `pageY` - la coordinata relativa al documento non cambia, si prende a riferimento la parte superiore del documento (che ora fuori dall'area visibile di scorrimento). |
| 20 | +- `clientY` - la coordinata relativa alla finestra è cambiata (la freccia è diventata più corta), dal momento che lo stesso punto è più vicino al bordo superiore della finestra. |
21 | 21 |
|
22 | | -## Element coordinates: getBoundingClientRect |
| 22 | +## Le coordinate di un elemento: getBoundingClientRect |
23 | 23 |
|
24 | 24 | The method `elem.getBoundingClientRect()` returns window coordinates for a minimal rectangle that encloses `elem` as an object of built-in [DOMRect](https://www.w3.org/TR/geometry-1/#domrect) class. |
25 | 25 |
|
@@ -243,7 +243,7 @@ function createMessageUnder(elem, html) { |
243 | 243 | } |
244 | 244 | ``` |
245 | 245 |
|
246 | | -## Summary |
| 246 | +## Riepilogo |
247 | 247 |
|
248 | 248 | Any point on the page has coordinates: |
249 | 249 |
|
|
0 commit comments