Buttons to scroll a horizontal overflow grid

Design help General
1

HI there! I am relatively new to Webflow so my apologies if I don’t explain anything clear enough. I am currently in the process of making a website portfolio. For the area that my works are located, I have them broken up into categories by using sections.

In each section, I have a grid which overflows horizontally off the page to allow for scrolling. Because I use my trackpad, I never considered the fact that nobody would be able to scroll the grid if using a mouse.

I thought about maybe adding in buttons that when pressed, which would be able to scroll the grid by a certain amount of pixels, but I havent been able to find anything in terms of interactions, and I don’t seem to understand a-lot of the research I have been trying to do in terms of using a combination of HTML + CSS + Javascript code.

Im looking for something like this:

portoflio_scrolling_concept@2x
portoflio_scrolling_concept@2x2022×1134 129 KB

Any help would be greatly appreciated about how I might be able to achieve this. I have also attached an image of my concept before I started making the site in Webflow.

Thanks so much! :smiley:

Here is my site Read-Only: Live Read Only Link
Heres my live site: Live Published Site

2

Hi

Welcome :slight_smile:

Try this tutorial about Horizontal scrolling. hope it helps

3

Hi there!

Thanks for getting back to me! Unfortunately that isn’t the effect I was aiming for, however your reply did inspire me to take another crack and I did some more research and figured out how to implement the necessary code for it to work.

Don’t know how I wasn’t able to figure this out yesterday. But I appreciate the help.

Thanks! :smiley:

1 Like
4

@KiwiBlueSpring could you please share that tutorial? I’m looking for a solution for this problem as well :slight_smile:

1 Like