I want to add a website portfolio widget that scrolls

This topic has 5 replies, 3 voices, and was last updated 2 years, 5 months ago by Fernando.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
March 31, 2023 at 10:52 pm #2591553

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

April 1, 2023 at 6:13 am #2591921

David
Staff
Customer Support

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.

April 5, 2023 at 7:59 pm #2598868

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?

April 5, 2023 at 9:16 pm #2598890
Fernando
Customer Support
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;
}
```
April 11, 2023 at 1:02 am #2605141

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.

April 11, 2023 at 1:49 am #2605200

Fernando
Customer Support

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

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

Popular Articles

Start building better websites today.