# Condition: If page hight \>

**URL:** <https://forum.bubble.io/t/condition-if-page-hight/242805>\
**Category:** Idea\
**Created:** [January 22, 2023, 2:52pm UTC](https://forum.bubble.io/t/condition-if-page-hight/242805 "2023-01-22T14:52:34Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![anon7950936](https://avatars.discourse-cdn.com/v4/letter/a/96bed5/32.png) [@anon7950936](https://forum.bubble.io/u/anon7950936)\
**Post date:** [January 22, 2023, 2:52pm UTC](https://forum.bubble.io/t/condition-if-page-hight/242805/1 "2023-01-22T14:52:34Z")

</div>

Speaking of the page hight, when you have lesser, then there is no big scroll bar on the side, and when you have larger content of the page, the scroll bar is shown.

 ![example241421](https://us1.discourse-cdn.com/bubble/original/3X/7/1/7140777f4e6d8079b9fa35fcd41146168d3f1de3.jpeg)

And then if page hight is lesser then your screen page hight, there is no scrollbar.

 ![example214121512](https://us1.discourse-cdn.com/bubble/original/3X/5/2/52bb315d0a49a58a4eafd43d53b9f8979438cf18.jpeg)

Condition to make en element visible if page has lesser hight then (\<) xxxx

---

<div class="post-metadata">

**Author:** ![troy.roberge](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/troy.roberge/32/51507_2.png) [@troy.roberge](https://forum.bubble.io/u/troy.roberge)\
**Post date:** [January 22, 2023, 4:01pm UTC](https://forum.bubble.io/t/condition-if-page-hight/242805/2 "2023-01-22T16:01:38Z")

</div>

Huh???

---

<div class="post-metadata">

**Author:** ![anon7950936](https://avatars.discourse-cdn.com/v4/letter/a/96bed5/32.png) [@anon7950936](https://forum.bubble.io/u/anon7950936)\
**Post date:** [January 22, 2023, 4:47pm UTC](https://forum.bubble.io/t/condition-if-page-hight/242805/3 "2023-01-22T16:47:29Z")

</div>

Ahahaha 😃 Is it that bad? 😃

Come on, you probably have experienced when you have a page that is longer then your screensize, how the scroll bar appears on the right side, as there is to scroll.

But if you have a page short enough, so that there is no scrolling space, there is no scrollbar.

Imagine than having a one page app, and some of the “pages” are with the scorllbar, and some of them are without scrollbar, you will experience how the hole page moves left and right for the thickness of the scroll bar and if there is a scrolling bar or not.

---

<div class="post-metadata">

**Author:** ![troy.roberge](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/troy.roberge/32/51507_2.png) [@troy.roberge](https://forum.bubble.io/u/troy.roberge)\
**Post date:** [January 22, 2023, 4:49pm UTC](https://forum.bubble.io/t/condition-if-page-hight/242805/4 "2023-01-22T16:49:54Z")

</div>

Just hide the scrollbar. Every site has a scrollbar.

Use CSS and it’s gone.

---

<div class="post-metadata">

**Author:** ![anon7950936](https://avatars.discourse-cdn.com/v4/letter/a/96bed5/32.png) [@anon7950936](https://forum.bubble.io/u/anon7950936)\
**Post date:** [January 22, 2023, 4:57pm UTC](https://forum.bubble.io/t/condition-if-page-hight/242805/5 "2023-01-22T16:57:10Z")

</div>

@troy.roberge

Using now a html to remove the scrollbars, while linking the html with an element ID.

Is there a way to remove the scrollbar of a browser?

Here is the snippet for elements, where you add html element (with snippet) to a page, and link with a Repeating group for example ID

```
<style type="text/css">
#noscrollbar::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
#noscrollbar::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
#noscrollbar{
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
#noscrollbar::-webkit-scrollbar-thumb {
  background: transparent;
  border: 0px none;
  border-radius: 0px;
}
#noscrollbar::-webkit-scrollbar-thumb:hover {
  background: transparent;
}
#noscrollbar::-webkit-scrollbar-thumb:active {
  background: transparent;
}
#noscrollbar::-webkit-scrollbar-track {
  background: transparent;
  border: 0px none;
  border-radius: 0px;
}
#noscrollbar::-webkit-scrollbar-track:hover {
  background: transparent;
}
#noscrollbar::-webkit-scrollbar-track:active {
  background: transparent;
}
#noscrollbar::-webkit-scrollbar-corner {
  background: transparent;
}
</style>
```