[Resolved] Container vertical scrolling

[iamarghya]

See, on this page, there are 3 sections latest job, answer key and etc, can we just add a vertical scroll to them? I mean now there are 7 posts showing If I want to show 4 posts first then after scrolling other 2-3 posts will be reveal is this possible?

[Fernando]

Hi Iamarghya,

It’s possible. Here’s a CSS you may try adding in Appearance > Customize > Additional CSS:

.gb-container.cards > .gb-inside-container > .gb-grid-wrapper {
    height: 230px;
    overflow-y: scroll;
}

Kindly modify 230px to your preference.

Hope this helps!

[iamarghya]

Oh nice, I did it now can’t it be like infinite scrolling I mean without the scroll bar it kinda looks odd.

[Fernando]

For now, you would need custom JS for that.

It’s a feature planned for GenerateBlocks Pro.

Hope this clarifies!

[iamarghya]

Uhu generateblock pro ok I will keep that on my bucket list but will be using this js will decrease my load speed? and another question does using more query loops on one-page decrease the page performance?

[iamarghya]

I did try to hide the scroll-bar by using its color to transparent but the problem is it also does the same with the built-in browser scroll-bar so is I did something to select those particular scrollbars can u check once for me if that is correct?

[Fernando]

Technically, any content you add to a page/post increases the size of the page, affecting the time it loads.

If your query doesn’t load too many posts, then it would be fine.

Moreover, every query is a new request to the server, so, having too many queries would slow down a site as well.

This is all dependent though on the speed of your server. The faster your server is, the more content/queries you can have without it affecting your site’s performance.

With regards to the scrollbar, here’s a CSS you may try:

.gb-container.cards > .gb-inside-container > .gb-grid-wrapper::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

.gb-container.cards > .gb-inside-container > .gb-grid-wrapper::-webkit-scrollbar-track {
    background-color: orange;
}

.gb-container.cards > .gb-inside-container > .gb-grid-wrapper::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}

Kindly replace the values to your preference.

Hope this helps!

[iamarghya]

Ok Got it fully understood.❤ Thanks for the help…

[Fernando]

You’re welcome! 🙂

[iamarghya]

Hey got an extra question u told me how to make vertical scrolling but can I make those scrolling automatics I mean that posts will vertically scroll automatically with a time gap.

[Ying]

Hi there,

That will require some custom JavaScript.

[iamarghya]

Oh, so can u guys provide it or that is out of scope?

[Ying]

That’s out of scope, unfortunately 🙁
Please refer to this article for what’s included in GP premium support: https://generatepress.com/what-support-includes/

[iamarghya]

OK OK, no problem…

[Ying]

Thanks for your understanding 🙂

[Author]

Posts