Severe degradation of scrolling behavior

[CuteWaterBeary]

I like the styling of this sticky roll but at each heading, the scroll pauses to add the div at the top for unknown reasons. The choppiness is extreme when its a long page with many headings. This effect can also be seen in the gifs you put of the plugin.

[zhouhua]

Indeed, since the headings fixed at the top of the page are not truly using sticky position, but are rendered additionally, there is often a jarring effect during scrolling due to height changes. I currently don't have a particularly good solution, but perhaps some appropriate animations could mitigate this feeling.

[CuteWaterBeary]

You could try rendering at a different z-value to not change the height and/or having it generate asynchronously.

…

On Mon, Jul 8, 2024 at 4:43 AM Zhou Hua ***@***.***> wrote: Indeed, since the headings fixed at the top of the page are not truly using sticky position, but are rendered additionally, there is often a jarring effect during scrolling due to height changes. I currently don't have a particularly good solution, but perhaps some appropriate animations could mitigate this feeling. — Reply to this email directly, view it on GitHub <#4 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYZIGR7NKXVWSKKRIUEEQA3ZLJ3MTAVCNFSM6AAAAABKQRC5Q6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMJTG44DMNRSGA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[zhouhua]

I suppose you are expecting an effect similar to the demo above, where scrolling is smooth and without any jarring jumps.

However, I didn't implement it this way initially because if a note's heading is exactly covered by the heading tree I added at the top, it would be invisible to the user, but still visible to the program. This could cause rendering inaccuracies in the heading tree. I need to research this issue further.

[zhouhua]

I think I've resolved the issue. You can try installing the latest version and see if it works.

[itsonlyjames]

Hey @zhouhua, first of all thank you for your work, this is the best sticky heading plugin to date. Unfortunately, however, the issue is still apparent...

I've been able to fix the issue with some CSS, see the buttery smoothness below. If we decided to go down the CSS route then it would also be amazing, because a bunch less calculations would need to run on scroll as I saw how you calculated the height in your fix and added that to the top of the page content.

This totally is the way to go I think, especially because view.setEphemeralState({ line: heading.position.start.line }) places the header in the middle of the page, so we don't actually have to worry about any offsets or anything.

I am planning on opening a seperate issue however, which may relate to this, in that I'd love the headers to be scrolled to the top, and I had some success with view.editor.scrollIntoView(), however couldn't get the offset working (the headings are behind the position absolute sticky header) but I digress... will open a seperate issue.

[zhouhua]

@itsonlyjames Yes, if there's a CSS solution, it would definitely be preferable to my current JavaScript approach. The effect in your first screenshot is different from what I tested—scrolling is smooth on my computer, and I didn't notice any bouncing. Additionally, could you share the CSS you used to fix the issue?

[itsonlyjames]

@zhouhua for sure, let me submit a PR so I can add the CSS and you may undo the JS. I will do this tomorrow, bare with me. I am on a mac at 120hz display, what device are you on? Otherwise I'm not sure why I seem to get the issue.

Complete side note, I want to try find the setting for if people use inline titles or H2's, because I use H2's throughout my documents, I want to have that aligned left and not indented. If you know what I mean? This PR is gonna make this plugin absolutely fire.

[itsonlyjames]

@zhouhua I must be delerious from a long day and lack of sleep but you actually already made the root element position absolute in this commit 2 days ago: 7a501d4#diff-380b7b38760dd442e897eb0164c58f6a17da966ccaca6318017a468c163979b1

I think it's an issue with unloading the plugin. When I updated the plugin, I expected it to be updated and reloaded, but no maybe it took reloading Obsidian to get it working smoothly again. Your fix is sublime and I don't actually receive any issues with scrolling jumping. I will however look into some additional features, I'd love to open a PR with a toggle for the heading indicators, as well as the above statement about if no H1 is present, don't indent H2 and subsequent headers.

Your plugin is as close to VSCode's implementation to date, and I had the same dream as you because it's absolutely amazing. Thank you for your hard work 🙏

[zhouhua]

@itsonlyjames Thank you for appreciating my work. Let's open a new issue to discuss the indentation problem when an h1 is missing.