Scroll element

Scrolls an element to a specific set of coordinates.

Element Selector

Enter the element selector you want to scroll to.

Selector Options

Select the desired options.

To Horizontal Coordinate

Scroll horizontally to the coordinate entered by the user.

To Vertical Coordinate

Scroll vertically to the coordinate entered by the user.

Scroll to Target

Scroll until the matching element is visible in the browser window.

Smooth Scroll

The scrollbar scrolls more smoothly without being abrupt.

Scroll Horizontally by Offset

Scroll a horizontal distance entered by the user. Based on the distance value provided.

When selecting the Scroll Horizontally by Offset option, the To Horizontal Coordinate (px) field changes to Scroll by X (px). Entering a positive value scrolls to the right, and a negative value scrolls to the left.

Scroll by X (px)

Scroll an additional horizontal distance. The scroll distance can be entered using a function, for example, the function {{$randint(500,600)}} will generate a random value between 500 and 600 and scroll by that value.

Scroll Vertically by Offset

Scroll a vertical distance entered by the user. Based on the distance value provided.

When selecting the Scroll Vertically by Offset option, the To Vertical Coordinate (px) field changes to Scroll by Y (px). Entering a positive value scrolls downward, and a negative value scrolls upward.

Scroll by Y (px)

Scroll an additional vertical distance. The scroll distance can be entered using a function, for example, the function {{$randint(500,600)}} will generate a random value between 500 and 600 and scroll by that value.

Practical Examples

Scroll by Y (px) Normally

Example

For instance, my workflow involves visiting the Etsy page and then scrolling down to view products.

To achieve this, I will configure the Scroll element node as follows:

First, select the CSS selector for the node. Here, I will choose to scroll using the CSS Selector with the selector html, which means scrolling the entire page. Next, select Smooth Scroll to ensure smooth scrolling without jerking. Then, select Scroll Vertically by Offset to scroll to a desired level. Finally, choose the distance to scroll; here, I don’t need to worry about what px means, just enter a number and adjust to achieve the desired scroll distance, for example, I want to scroll by 1000px. The node will be configured as follows:

Additionally, I can combine this with the Repeat task node to break the long scroll into smaller segments and repeat multiple times.

Successfully Scroll a Page

Example

Typically, when scrolling a page, I use the global CSS selector like html.

However, in some cases, a page has multiple scrollable regions, and I cannot use the html selector to scroll. Instead, I need to use the selector of the specific region, as follows:

For example, on this Discord page, I want to scroll the chat section to view messages in the channel.

If I use the html selector, the node will run but won’t scroll because there are multiple scrollable regions on this page.

Therefore, I need to obtain the selector for the chat region of the channel. Here, I will use the selector main>[class*="messagesWrapper"] [class*="scroller"] in the Scroll element node with the following configuration:

When running this node, I can see the messaging region being scrolled down.

Scroll Successfully on Most Pages

Example

Typically, when scrolling a page, I use the global CSS selector like html.

However, in some cases, a page has multiple scrollable regions, and I cannot use the html selector to scroll. Therefore, I need to use the selector of the specific region instead of the entire page. However, some pages make it quite difficult to obtain the selector.

To address this, you can configure the Scroll element node as follows to scroll on the Discord page below:

When running this node, I can see the messaging region being scrolled down.

Scroll Until Element Appears

Example

For example, I want to scroll to the section displaying related products on a product page and then perform subsequent actions.

To achieve this, I need to configure the Scroll element node as follows:

In addition to scrolling, I need to use the Condition node to ensure the element is visible on the screen before stopping the scroll.

First, I need to obtain the selector for the related products section, which is [id="image-tags"], and then configure the Element visible in screen option to stop scrolling when the element is visible on the screen.

The node configuration will be as follows:

When running, I will achieve the desired result as initially intended.