Fix comment section auto-scroll glitch on initial load

[aditya0155]

Pull Request Type

• [x] Bugfix

Related issue

• closes #8307

Description

Fixes an unwanted auto-scroll behavior when loading comments. Previously, when a user expanded the video description, scrolled to the bottom, and then clicked "Load Comments," the page would automatically scroll down too far, causing the user to miss the first few comments.

Screenshots

Before :

https://github.com/user-attachments/assets/449bc032-75ed-49fb-8cc9-226c84b70d48

After:

https://github.com/user-attachments/assets/32a9f983-fb37-42c6-b272-d0c7d4b9082c

Before 2nd example:

https://github.com/user-attachments/assets/da52f1ec-a94f-4a8a-9153-f55ee683702f

After 2nd example:

https://github.com/user-attachments/assets/ac09c8bb-1be6-4a03-af7c-cc504a628c52

Testing

• Go to a video e.g. https://youtu.be/g3FkuZNSGkw

• Expand description

• Scroll description to the bottom

• Load comments

• Check if the comment section starts from the 1st comment or not

• 2nd -> check if community post comments are loading properly or not.

Desktop

• OS: Windows 11
• OS Version: Windows 11 24H2 (OS Build 26100.7171)
• FreeTube version: 0.23.12

Additional context

• Nothing special just I have tested it on multiple videos including community posts comment section for edge cases and I think the issue is resolved.

[efb4f5ff-1298-471a-8973-3d47447115dc]

Haven't actually tested it yet but what I'm seeing from the after videos is that the sort by drop down and hide comments is out of view

[aditya0155]

Haven't actually tested it yet but what I'm seeing from the after videos is that the sort by drop down and hide comments is out of view

sure I'll work on it to show "hide comments" and "sort by drop down"

[aditya0155]

give me few days I'll try to make it more fluent than this to avoid the auto scroll up

https://github.com/user-attachments/assets/d1fbfb64-051e-417a-9770-b436d6cd57df

[aditya0155]

Okay I worked on this issue I got 2 solutions.

• 1st version -> Clean and minimal code:

In the current behavior, when scrolling down the page, the recommendation sidebar keeps loading videos above the fold.

Because of this, whenever the user clicks “Click to View Comments”, the page expands downward more than expected.

To avoid a sudden “teleport” effect, I implemented a simple smooth scroll so the viewport moves back to the top of the comments section.

https://github.com/user-attachments/assets/5b939830-d226-4d5d-a0ae-7e612b6440da

• One possible improvement: When comments are expanded, we could load additional recommendation videos so the right panel doesn’t leave an empty gap.

https://github.com/user-attachments/assets/326badb6-fcaa-4e4a-a88b-4f15f3b51427

• as you can see from the above video this can be avoided if we don't put all the videos above the fold before expanding the videos by this we get smooth scroll down like this:

---

• 2nd idea -> I also experimented with giving the sidebar its own scroll container. This avoids the empty-space issue entirely and gives minimal smooth scrolling down with no teleport every time comments expand.

But there is one major drawback: it adds a second scrollbar. Most users don’t scroll the recommendation videos separately, and they generally prefer scrolling the recommendations and comments together so it will might make user experience worse.

https://github.com/user-attachments/assets/e6747101-9a82-4479-8dee-e80cfafdb2e6

---

I have committed the 1st version only but still added the video of v2 as a idea but users wont like it.

[efb4f5ff-1298-471a-8973-3d47447115dc]

This isnt really any fault of you but this feels more like a workaround then addressing the root cause. The question is how can we address the root cause of this.

@PikachuEXE thoughts

[PikachuEXE]

Current implementation is to make left side sticky, so that it remains in viewport even when right side is scrolled down So it looks like this initially (right side probably shorter due to lazy load

After scrolling to the bottom

After expanding comments while scrolled to the bottom

So with the current UX design it is expected to have this behaviour Either

• Use 1st version (but probably need a bit of adjustment, details below
• Use 2nd version (changes UX which might not be desirable
• Remove position: sticky but also lose access to expand comment when scrolled below

Generally I think if you don't want UX to be changed 1st one is better However

• Current implementation only jumps on comment load, not when I hide and re-expand the section
• Should not jump on comment load when "Auto Load Next Page" enabled

[github-actions[bot]]

This PR is stale because it has been open 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.