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

**URL:** https://meta.discourse.org/t/adding-an-overlay-to-code-blocks-to-prevent-scroll-until-user-click-it/301709
**Category:** Feature
**Tags:** mobile
**Created:** [March 31, 2024, 6:57am UTC](https://meta.discourse.org/t/adding-an-overlay-to-code-blocks-to-prevent-scroll-until-user-click-it/301709 "2024-03-31T06:57:08Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [March 31, 2024, 6:57am UTC](https://meta.discourse.org/t/adding-an-overlay-to-code-blocks-to-prevent-scroll-until-user-click-it/301709/1 "2024-03-31T06:57:08Z")

</div>

Hello 👋

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 🙂

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [April 3, 2024, 12:57am UTC](https://meta.discourse.org/t/adding-an-overlay-to-code-blocks-to-prevent-scroll-until-user-click-it/301709/2 "2024-04-03T00:57:45Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [April 3, 2024, 3:07am UTC](https://meta.discourse.org/t/adding-an-overlay-to-code-blocks-to-prevent-scroll-until-user-click-it/301709/3 "2024-04-03T03:07:29Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [April 4, 2024, 5:30am UTC](https://meta.discourse.org/t/adding-an-overlay-to-code-blocks-to-prevent-scroll-until-user-click-it/301709/4 "2024-04-04T05:30:04Z")

</div>

Hello 👋

This is the first version, I meant something like this, but I am stucked with define the element height. 😕 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…

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [July 18, 2024, 12:26pm UTC](https://meta.discourse.org/t/adding-an-overlay-to-code-blocks-to-prevent-scroll-until-user-click-it/301709/5 "2024-07-18T12:26:27Z")

</div>

Hello 👋

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

[https://github.com/VaperinaDEV/discourse-codeblocks-overlay](https://github.com/VaperinaDEV/discourse-codeblocks-overlay)