Forum Academy Marketplace Showcase Pricing Features

Condition: If page hight >

Idea
#1

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
example241421715Ă—425 12.9 KB

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

example214121512
example214121512700Ă—424 6.67 KB

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

#2

Huh???

2 Likes
#3

Ahahaha :smiley: Is it that bad? :smiley:

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.

#4

Just hide the scrollbar. Every site has a scrollbar.

Use CSS and it’s gone.

1 Like
#5

@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>