Archived topic
Container vertical scrolling
14 replies · Started by iamarghya on June 30, 2022
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?
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!
Oh nice, I did it now can't it be like infinite scrolling I mean without the scroll bar it kinda looks odd.
For now, you would need custom JS for that.
It’s a feature planned for GenerateBlocks Pro.
Hope this clarifies!
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?
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?
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!
Ok Got it fully understood.❤ Thanks for the help...
You’re welcome! :)
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.
Hi there,
That will require some custom JavaScript.
Oh, so can u guys provide it or that is out of scope?
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/
OK OK, no problem...
Thanks for your understanding :)