I want to add a website portfolio widget that scrolls

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.

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?

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;
}

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.

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.