docs: improve autoscroll logic to handle long messages #10448

[mugiwarafx]

Describe the problem

Description:

In the Svelte tutorial section discussing lifecycle and the update lifecycle function (specifically, the autoscroll functionality), the current implementation does not consistently trigger autoscrolling for very long messages. The existing logic, autoscroll = div && div.offsetHeight + div.scrollTop > div.scrollHeight - 20;, fails to account for cases where a user inputs a message that significantly increases the scrollHeight of the container. This can lead to a scenario where the chat does not automatically scroll to the bottom after a long message is added, detracting from the user experience. An improvement to the autoscroll logic is proposed to ensure that autoscrolling is triggered regardless of the message length.

Reproduction:

1. Visit the Svelte interactive tutorial at Svelte Tutorial - Lifecycle - Update.
2. Follow the tutorial steps until you reach the section that implements autoscroll functionality using beforeUpdate and afterUpdate.
3. Use the chat application to input and send a very long message, such as a large paragraph of "Lorem ipsum..." text. You may need to adjust the amount of text based on your device to replicate the bug effectively.
4. Observe that after sending a long message, the chat does not scroll to the bottom as expected, leaving the bot message partially or completely out of view.

Describe the proposed solution

Proposed Fix:

To address this issue, the autoscroll logic should be updated to better capture scenarios where new content significantly increases the container's scrollHeight.

The proposed change is: autoscroll = div && div.scrollTop + div.clientHeight + 100 >= div.scrollHeight;.

This adjustment ensures that autoscroll is activated when the user is within 100 pixels of the bottom of the chat, providing a more reliable trigger for autoscrolling after long messages are added.

This change aims to enhance the functionality by ensuring that the chat window always scrolls to the newest message, improving the overall usability and user experience.

It also ensures that the Svelte tutorial provides a robust example of implementing autoscroll functionality, making it more useful for learners who are looking to implement similar features in their own projects.

Fixes #10448

Before submitting the PR, please make sure you do the following

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• Prefix your PR title with feat:, fix:, chore:, or docs:.
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests and linting

• Run the tests with pnpm test and lint the project with pnpm lint

[changeset-bot]

⚠️ No Changeset found

Latest commit: 20a4570

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR