fix jittery scrolling

[saltybuckets]

Subsystem: doc

This pr fixes the jittery scrolling behavior introduced in
#37301

Fixes: #40099
Refs: https://infrequently.org/2020/12/resize-resilient-deferred-rendering/

[aduh95]

Thanks for sending this. Can you please revert the unrelated stylistic changes? Also it'd be nice if the JavaScript code was using the same stylistic choices as the rest of the codebase – maybe you can put this to a separate .js file in doc/api_assets so the linter can autofix that for you.

[Trott]

@nodejs/website

[saltybuckets]

@aduh95 done! 👍

[nschonni]

Why not add to the existing script?

[saltybuckets]

@aduh95 asked to move it to a different file

maybe you can put this to a separate .js file in doc/api_assets so the linter can autofix that for you.

[aduh95]

Can you please remove this line:

node/.eslintignore

Line 9 in 8d83c47

doc/**/*.js

And then, run make lint-js-fix.

[saltybuckets]

@nschonni can you review the changes pls since @aduh95 has been gone for 6 days

[aduh95]

@Sanchitverma78 I understand it's frustrating when a PR gets stalled because of a lack of reviews, please also understand that most (all?) Node.js contributors are doing reviews on their spare time, so you have to understand that sometimes things takes time because of a lack of volunteers and different priorities.
It's of course OK for you to ask for reviews, you may ping me to ask me when I'll be available to review your PR, you may also ping other collaborators, but tagging me to at the third person feels a bit aggressive and unnecessary so please don't.

[aduh95]

@mscdex Are you able to confirm this is fixing the issue you were experiencing?

[saltybuckets]

he didnt reply

[Trott]

I built with this just now and it doesn't fix the jittery scrolling for me, I'm sorry to say. Is there anything I can do to make this feedback more helpful? Like, would a screen recording help or something like that?

[mscdex]

I haven't tested this myself yet. Assuming this solution should fix this particular problem, I think there are a few things that probably need adjusting compared to the code used at the referenced article:

• The rootMargin values are probably tied to/related to the values used in the default contain-intrinsic-size values.
• I think the query selector being used currently is going to be way too restrictive. I would guess all elements in the (right-hand side) content area should be selected since they all scroll together.
• The referenced article mentions making the script inlined at the bottom of the document whereas we're currently using defer async, I'm not sure if that's important or not.

[mscdex]

Additionally, it's possible that the current contain-intrinsic-size values in the docs css need to be adjusted for the script to work properly?