Customizing Scroll bar

According to my HTML developer the scroll bar slider, the one that we pick up through our mouse and drag to scroll the page, is equal to the height of the Page and the element that we pick up through our mouse to scroll takes size based on how much scrollable content do we have.

Are there no adjustments possible?

Let us take an example of this Page →

You will see that on the Right-hand side of the page → “For the lords____” and “Fabricated from Dual-Weather______________”

Now, what my wish is →

Decrease the size of the total height of the entire scroll bar (Grey background-color + scrollable blue color) to 50% without decrease the height of the content area that is scrollable.

Also fix the height of the blue color that is scrolled irrespective of the amount of content we have.

Hi, @Novicedeveloper!

With “content area”, do you mean the visible content area (the scroll container) or the total content area (the content to be scrolled)?

That would be to remove a feature for the user to get a clue of how much content there is compared to the visible part, the visual effect you seek is not benefitting to the user IMHO.


The scroll container.

In your stylesheet “pgwslider.css” you have this ruleblock:

.scrollbar {
    float: left;
    height: 218px;
    width: 80%;
    overflow-y: scroll;
    margin-bottom: 5%;

You can try whatever height you want here.

Do you know any pen where content is more, but the scroller is less in height of the scroll container?

I don’t quite understand the question. Should the scrollbar length end above the visible content bottom?

Yes Boss!

I’ve no idea whether or not that’s possible (somehow, I hope not), but bear in mind that that will not only confuse visitors to your site by changing the expected behaviour, but will make it difficult for somebody with poor motor control to scroll, by requiring much finer movements. (Think about folk with everyday issues, such as severe arthritis.)


My browser won’t let me visit that page!

McAfee WebAdvisor
Warning: Trouble ahead
Are you sure you want to go there?… may be risky to visit.

Why are you seeing this?
When we visited this site, we found it exhibited one or more risky behaviors.

1 Like

If it helps, it looks like this:

1 Like

Then one of us might disapppoint you, I’m afraid.

1 Like

How is discourse software managing the same thing

That’s not the same thing. In the first example you gave, the scrollbar is a default browser scrollbar.

Discourse has a “timeline” widget in longer topics, but that does not replace the browser scrollbar.

Is it something like parallax?

You can only create custom scrollbars with JS (apart from colours in some browsers). The js removes the standard scrollbars and then creates its own track mechanism and then you can position how you like. Just “google custom scrollbars in js/jquery” and you will find loads of examples.

Generally custom scrollbars are a user nightmare if not done correctly and best avoided.


Then here we go and just for fun :slight_smile:

I don’t recommend doing this*


I’m glad you said that, because it’s really confusing. You can continue to scroll after the scrollbar has “hit the buffers”, so to speak.

1 Like

What a weird thing to do!!


I’ll chip something in later, I just have moments of free time to have some fun, and make a post now and then. :slight_smile:

1 Like

Not weird actually I was trying to achieve something like this →

The comment button and scroll should be fixed in Left at 90 as sticky and the comments will scroll in the limited space.