[Support request] I want to add a website portfolio widget that scrolls

[Jin]

Hi there

I want to add in a website portfolio widget that scrolls. Link is below.

From my understanding, this is just a vertically long image of size 600 x 2190.

The develop is able to create a container of a fixed size and have image stay fixed while enabling the user to scroll vertically down the image within the container.

How can I do this in GeneratePress?

Thanks

[David]

Hi there,

You can use the GenerateBlocks plugin.

1. Add a GB Container Block to the page.
2. In Layout set the Overflow Y to Auto or Scroll
3. In Sizing set the Max Height to a smaller valuer eg. 300px.
4. Inside the Container Block add a GB Image Block for your image.

As long as the Image is taller then the containers max height, then it will scroll.

[Jin]

Hi David

Thank you for your assistance. It works perfectly.

Is it possible to customize the scroll bar design? Specifically, can we change it’s colour, size, length and add up or down arrows?

Also, it shows for all three images when the page loads. Is it possible to have the scroll bar show when the user’s mouse hovers over it?

[Fernando]

Hi Jin,

Add change-scroll-style to the classlist of the Container Block.

Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

Then, add this through Appearance > Customize > Additional CSS?:

.gb-container.change-scroll-style::-webkit-scrollbar-track {
  border: 1px solid #000;
  padding: 2px 0;
  background-color: #404040;
}
.gb-container.change-scroll-style::-webkit-scrollbar {
  width: 30px;
  display:none;
}
.gb-container.change-scroll-style:hover::-webkit-scrollbar {
  display:block;
}

.gb-container.change-scroll-style::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #737272;
  border: 1px solid #000;
}

[Jin]

Hi Fernando

Thanks for your help, appreciate it. May I ask how I can have the vertical heights of all the scrolls to be a fixed size? As you can see, they vary at the moment. I have tried using height, max-height and min-height in CSS but none seem to work.

[Fernando]

I don’t think that can be changed. Its height depends on the content within the Container. See: https://stackoverflow.com/questions/45755144/scrollbar-thumb-height-in-css#:~:text=I%20don%27t%20think%20so%2C%20the%20height%20of%20the%20thumb%20is%20based%20in%20the%20size%20of%20content%2C%20you%20can%20change%20the%20width%20inside%20the%20%3A%3A%2Dwebkit%2Dscrollbar%20but%20the%20height%20will%20always%20be%20based%20on%20the%20content.

[Author]

Posts