mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
24 lines
925 B
24 lines
925 B
6 years ago
|
---
|
||
|
title: beforeUpdate and afterUpdate
|
||
|
---
|
||
|
|
||
|
The `beforeUpdate` function schedules work to happen immediately before the DOM has been updated. `afterUpdate` is its counterpart, used for running code once the DOM is in sync with your data.
|
||
|
|
||
|
Together, they're useful for doing things imperatively that are difficult to achieve in a purely state-driven way, like updating the scroll position of an element.
|
||
|
|
||
|
This [Eliza](https://en.wikipedia.org/wiki/ELIZA) chatbot is annoying to use, because you have to keep scrolling the chat window. Let's fix that.
|
||
|
|
||
|
```js
|
||
|
let div;
|
||
|
let autoscroll;
|
||
|
|
||
|
beforeUpdate(() => {
|
||
|
autoscroll = div && (div.offsetHeight + div.scrollTop) > (div.scrollHeight - 20);
|
||
|
});
|
||
|
|
||
|
afterUpdate(() => {
|
||
|
if (autoscroll) div.scrollTo(0, div.scrollHeight);
|
||
|
});
|
||
|
```
|
||
|
|
||
|
Note that `beforeUpdate` will first run before the component has mounted, so we need to check for the existence of `div` before reading its properties.
|