# window scrolling

[browser](../../..) ⟩ [DOM](../..) ⟩ [type](..) ⟩ [Window]() ⟩ scroll

{% tabs %}
{% tab title="🧨 雷區" %}
{% hint style="danger" %}
[**Window**]()**-**<mark style="color:yellow;">**reflecting**</mark> <mark style="color:orange;">**body**</mark> element [**event handlers**](../../../event/handler)：

if you assign one of the following event handlers on [document.body](https://developer.mozilla.org/en-US/docs/Web/API/Document/body), it will be reflected on [window]() too, and vice versa.&#x20;

* <mark style="color:yellow;">**onblur**</mark>, <mark style="color:yellow;">**onerror**</mark>, <mark style="color:yellow;">**onfocus**</mark>, <mark style="color:yellow;">**onload**</mark>, <mark style="color:yellow;">**onresize**</mark>, <mark style="color:purple;">**onscroll**</mark>

```javascript
const body = document.body;
body.onblur = function f(){};        // assigned on body
window.onblur                        // f: reflected on window

window.onresize = function g(){};    // assigned on window
body.onresize                        // g: reflected on body
```

📗  [Medium](https://medium.com/@mingjunlu/window-onscroll-vs-document-body-onscroll-9c331bb8d298)
{% endhint %}
{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
window[.scrollTo()](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo) takes the x and y coordinates [<mark style="color:yellow;">**in**</mark>**&#x20;**<mark style="color:red;">**document**</mark>**&#x20;**<mark style="color:yellow;">**coordinates**</mark>](../../../concepts/coordinates) and sets these as the scrollbar offsets (the browser **will try its best** to scroll the window so that the <mark style="color:yellow;">**specified point**</mark> is in the <mark style="color:orange;">**upper-left**</mark> corner of the <mark style="color:yellow;">**viewport**</mark>).
{% endhint %}

{% hint style="info" %}
* calling <mark style="color:orange;">elem</mark>[.scrollIntoView()](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) will try to put the <mark style="color:yellow;">**top edge**</mark> of the [element](../element) **at** or **near** the <mark style="color:yellow;">**top**</mark> of the [viewport](viewport).&#x20;
* you can use an <mark style="color:yellow;">**options**</mark> object `{`<mark style="color:blue;">`block`</mark>`:`<mark style="color:blue;">`inline`</mark>`:}` to control the <mark style="color:yellow;">**vertical**</mark>/<mark style="color:yellow;">**horizontal**</mark> alignment of the scrolling.
{% endhint %}

{% hint style="success" %}
* [Window.scroll()](https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll) is effectively the same as [.scrollTo()](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo).&#x20;
* For relative scrolling, see [.scrollBy()](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy), [.scrollByLines()](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollByLines), and [.scrollByPages()](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollByPages).
* For scrolling elements, see [Element.scrollTop](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop) and [Element.scrollLeft](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft).
{% endhint %}

{% hint style="danger" %}
To <mark style="color:yellow;">**scroll**</mark> the page with JavaScript, its <mark style="color:yellow;">**DOM**</mark>**&#x20;**<mark style="color:red;">**must**</mark>**&#x20;**<mark style="color:yellow;">**be fully built**</mark>, if we try to scroll the page with a script in <mark style="color:blue;">`<head>`</mark> , it <mark style="color:red;">**won’t work**</mark>.
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}
* [viewport](viewport "mention")
* [smoothly](scroll/smoothly "mention")
* [lock](scroll/lock "mention")
{% endtab %}

{% tab title="👥 相關" %}
* [bounding](../element/+boxes/bounding "mention") of [element](../element "mention") will change after scrolling.
* [padding](../element/+boxes/padding "mention") / [border](../element/+boxes/border "mention") / [scroll](../element/+boxes/scroll "mention")
* [coordinates](../../../concepts/coordinates "mention") relative to document / [viewport](viewport "mention") / container.
* :exclamation: [window-reflecting](../../../event/handler/window-reflecting "mention")
{% endtab %}

{% tab title="💈範例" %}
:floppy\_disk: replit: [scrollToBottom()](https://replit.com/@pegasusroe/scrollToBottom#script.js)

```javascript
// heights of the document and viewport.
const doc = { height: document.documentElement.offsetHeight };
const viewport = { height: window.innerHeight };
const scrollOffsetY = doc.height - viewport.height;

// scroll to the "bottom" of the page
window.scrollTo(0, scrollOffsetY);
```
{% endtab %}

{% tab title="📗 參考" %}
* [ ] JavaScript: The Definitive Guide (15.5 Document Geometry and Scrolling)
* [ ] JS.info ⟩&#x20;
  * [ ] [Window sizes and scrolling](https://javascript.info/size-and-scroll-window)
  * [ ] [Element size and scrolling](https://javascript.info/size-and-scroll)
* [ ] [你的 onscroll 不是你的 onscroll](https://medium.com/@mingjunlu/window-onscroll-vs-document-body-onscroll-9c331bb8d298)
{% endtab %}

{% tab title="📘 手冊" %}
* [](<> "mention") ⟩&#x20;
  * [.scrollTo()](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo)
  * [.scrollBy()](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy)
  * ([.scrollX](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX), [.scrollY](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY)) - <mark style="color:yellow;">**scroll offsets**</mark> of the document (<mark style="color:red;">**read-only**</mark> ⭐️)
  * ([.pageXOffset](https://developer.mozilla.org/en-US/docs/Web/API/Window/pageXOffset), [.pageYOffset](https://developer.mozilla.org/en-US/docs/Web/API/Window/pageYOffset)) - <mark style="color:yellow;">**aliases**</mark> for ([.scrollX](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX), [.scrollY](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY))&#x20;
* [element](../element "mention") ⟩&#x20;
  * [.scrollIntoView()](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)
  * [.scrollTo()](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo)
  * [scroll event](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event)
{% endtab %}
{% endtabs %}
