Adding an overlay to code blocks to prevent scroll until user click it

Feature
1

Hello :wave:

Code blocks can be really long… For example when it contains a full rebuild log or other long text… It’s not too easy to scroll through on code block section in a post or scroll to the end of code block especially on smaller screen size. The easiest way is scroll a bigger before code block or find the 10px on sides.

Would be a good option to add an overlay to the huge code blocks which prevent to scroll until a user interaction. When user click it the overlay disappears and the scroll activates.

Thanks :slightly_smiling_face:

1 Like
2

Maybe try it in a theme component? Can you see how it feels?

2 Likes
3

Yeah, I thought about it. It’s totally doable with a component. I’ll try it. :slightly_smiling_face:

1 Like
4

Hello :wave:

This is the first version, I meant something like this, but I am stucked with define the element height. :confused: The overlay would only show on scrollable codeblock. I tried it with element.scrollHeight > n etc… but it seems it always gets the height is 0. I have to find another way to define if the code block is scrollable…

1 Like
5

Hello :wave:

Back to here after a long time… I totally forget this. Now I’ve made a working one. :smile:

1 Like