How to scroll a scrollable container on Click of a other button

Ask us anything How do I?
1

Hey community, I have a scrollable list in the X-axis which I want to scroll on a button click.
I know how the native logic works to have an event listener on the button and likewise change scrollLeft value, but I am unable to target and likewise integrate the logic for the scrollable container in Weweb.

Parent container is a Collection list.
Button is an arrow button.

2

I would also like to know because I have a div in which I would like the user to scrollable using buttons but “scrollLeft” doesn’t work, maybe @aurelie can help us

3

Hey :wave:

I think I’ve managed to reproduce the desired outcome with .scrollLeft

Here is the custom JS on my button workflow. I needed to target the parent element of the collection (because WeWeb auto-generate a div)

const collection = wwLib.getFrontDocument().querySelector('#collection').parentElement;
collection.scrollLeft += 100;

Does that help?

1 Like
4

Hi @jptrinh,
I saw that you had done this in a Twitter project, I forgot to tag you here, thank you very much for your help

5

Are referring to the carousel? I used the native Slider component for that, with some customization!
You are welcome :slight_smile:

1 Like
6

first of all set up your scrollable list and button for enable scrolling. for click events add event listener to button. by javascript target the collection list and adjust it scrollLeft property. this method control horizontal scrolling when the button is clicked.

7

Do you know how you got it to scroll smoothly? Mine has no scroll animation when the workflow is executed. Using the same JS just with the proper ID

Edit: Ended up using the code below, but still curious how you got the other code to animate!

const collection = wwLib.getFrontDocument().querySelector('#CardScroller').parentElement;

const scrollAmount = parseInt(context.component?.props?.['3ee2ad12-62d9-459f-83b7-ed99f962eb12'], 10);

if (!isNaN(scrollAmount)) {
  const newScrollPosition = collection.scrollLeft + scrollAmount;

  collection.scrollTo({
    left: newScrollPosition,
    behavior: 'smooth'
  });
} else {
  console.error('The scroll amount is not a valid number.');
}
8

Added a custom CSS property on the container: scroll-behavior: smooth; — which is basically the same as you did in JS i guess :slight_smile:

1 Like