Draft: Custom timeline scroll #3226

Open
pleromian wants to merge 3 commits from gitlab-mr-iid-1959 into develop
Member

Historically timeline has been fixed to the body element as it was having default scroll behaviour. This MR allow to have different scroll parent (like #content div) and somehow simplifies closest status search logic. It also allows to utilize virtualScrollingIndex better if virtual scrolling is enabled.

For example, this is how default scroll parent (body) looks like. Scrollbar is covering navbar, as the whole body content is scrollable:
Screenshot_2024-12-28_at_00.25.55

In comparison, that's what custom scrollParent allows to do - scrollbar is pinned to the timeline content only and is padded against navbar:
Screenshot_2024-12-28_at_00.31.03

Diff somehow looks broken, but it works™. To test:

  1. Set useWindow = false
  2. Set overflow-y: hidden !important; style on body
  3. Set overflow-y: scroll; on #content
  4. This will look a bit off since other changes are needed to properly offset navbar, but should be enough for testing the concept.
Historically timeline has been fixed to the body element as it was having default scroll behaviour. This MR allow to have different scroll parent (like `#content` div) and somehow simplifies closest status search logic. It also allows to utilize virtualScrollingIndex better if virtual scrolling is enabled. For example, this is how default scroll parent (body) looks like. Scrollbar is covering navbar, as the whole body content is scrollable: ![Screenshot_2024-12-28_at_00.25.55](https://git.pleroma.social/-/project/1906/uploads/b4d2fc32287b79c66b5924aecfd84b68/Screenshot_2024-12-28_at_00.25.55.png) In comparison, that's what custom scrollParent allows to do - scrollbar is pinned to the timeline content only and is padded against navbar: ![Screenshot_2024-12-28_at_00.31.03](https://git.pleroma.social/-/project/1906/uploads/9521f51c2a90f723c1d0dbfc63ea0ef5/Screenshot_2024-12-28_at_00.31.03.png) Diff somehow looks broken, but _it works™_. To test: 1. Set `useWindow = false` 2. Set `overflow-y: hidden !important;` style on `body` 3. Set `overflow-y: scroll;` on `#content` 4. This will look a bit off since other changes are needed to properly offset navbar, but should be enough for testing the concept.
Owner

When I do the changes you suggested i get completely unscrollable timeline, instead of instructions please put necessary changes into the code

When I do the changes you suggested i get completely unscrollable timeline, instead of instructions please put necessary changes into the code
Author
Member

ok I will convert it to draft now, didn't want to lose this code anyway

ok I will convert it to draft now, didn't want to lose this code anyway
This pull request has changes conflicting with the target branch.
  • src/components/timeline/timeline.js
View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u origin gitlab-mr-iid-1959:gitlab-mr-iid-1959
git switch gitlab-mr-iid-1959

Merge

Merge the changes and update on Forgejo.

Warning: The "Autodetect manual merge" setting is not enabled for this repository, you will have to mark this pull request as manually merged afterwards.

git switch develop
git merge --no-ff gitlab-mr-iid-1959
git switch gitlab-mr-iid-1959
git rebase develop
git switch develop
git merge --ff-only gitlab-mr-iid-1959
git switch gitlab-mr-iid-1959
git rebase develop
git switch develop
git merge --no-ff gitlab-mr-iid-1959
git switch develop
git merge --squash gitlab-mr-iid-1959
git switch develop
git merge --ff-only gitlab-mr-iid-1959
git switch develop
git merge gitlab-mr-iid-1959
git push origin develop
Sign in to join this conversation.
No reviewers
No milestone
No project
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
pleroma/pleroma-fe!3226
No description provided.