Cuộn Chuột

Node Cuộn Chuột cho phép bạn cuộn trang web đến một vị trí hoặc phần tử cụ thể. Hỗ trợ cuộn ngang, cuộn dọc, cuộn mượt và cuộn cho đến khi phần tử xuất hiện trên màn hình.

Bộ Chọn Phần Tử

Điền bộ chọn phần tử của vùng cần cuộn.

Tuỳ chọn bộ chọn

Chọn các tuỳ chọn mong muốn.

Tới toạ độ ngang

Cuộn ngang tới toạ độ (pixel) đã nhập.

Tới toạ độ dọc

Cuộn dọc tới toạ độ (pixel) đã nhập.

Cuộn tới mục tiêu

Cuộn cho đến khi phần tử chỉ định hiển thị trên cửa sổ trình duyệt.

Cuộn mượt

Bật cuộn mượt mà, tránh giật lag khi cuộn.

Cuộn ngang thêm 1 khoảng

Cuộn thêm một khoảng cách ngang so với vị trí hiện tại.

Khi bật tùy chọn này, mục Tới toạ độ ngang(px) sẽ chuyển thành Cuộn thêm X(px). Giá trị dương cuộn sang phải, giá trị âm cuộn sang trái.

Cuộn thêm X(px)

Khoảng cách cuộn ngang. Có thể dùng hàm để tạo giá trị ngẫu nhiên, ví dụ {{$randint(500,600)}} sẽ tạo ngẫu nhiên một giá trị từ 500 đến 600 pixel.

Cuộn dọc thêm 1 khoảng

Cuộn thêm một khoảng cách dọc so với vị trí hiện tại.

Khi bật tùy chọn này, mục Tới toạ độ dọc(px) sẽ chuyển thành Cuộn thêm Y(px). Giá trị dương cuộn xuống dưới, giá trị âm cuộn lên trên.

Cuộn thêm Y(px)

Khoảng cách cuộn dọc. Có thể dùng hàm để tạo giá trị ngẫu nhiên, ví dụ {{$randint(500,600)}} sẽ tạo ngẫu nhiên một giá trị từ 500 đến 600 pixel.

Ví dụ thực tế

Cuộn dọc thêm Y(px) thông thường

Ví dụ

Ví dụ, quy trình vào trang Etsy và cuộn xuống để xem sản phẩm:

Cấu hình node Cuộn chuột:

Chọn bộ chọn CSS là html (cuộn toàn trang). Bật Cuộn mượt để cuộn không bị giật. Bật Cuộn dọc thêm 1 khoảng và nhập khoảng cách mong muốn, ví dụ 1000px:

Ngoài ra, có thể kết hợp với node Lặp lại số lần để chia nhỏ khoảng cuộn và lặp nhiều lần cho tự nhiên hơn:

Cuộn thành công trên trang có nhiều vùng cuộn

Ví dụ

Thông thường, khi cuộn trang, bạn sử dụng bộ chọn CSS html cho toàn trang.

Tuy nhiên, một số trang có nhiều vùng cuộn khác nhau và không thể dùng html. Khi đó cần lấy selector của vùng cụ thể.

Ví dụ trên trang Discord, muốn cuộn đoạn chat để xem tin nhắn:

Nếu dùng selector html, node sẽ chạy nhưng không cuộn được vì trang có nhiều vùng cuộn:

Cần lấy selector của vùng chat. Ở đây dùng main>[class*="messagesWrapper"] [class*="scroller"]:

Khi chạy, vùng chat được cuộn thành công:

Cuộn được ở hầu hết các trang

Ví dụ

Trong trường hợp trang có nhiều vùng cuộn và khó lấy selector cụ thể, bạn có thể cấu hình node cuộn chuột theo cách sau để cuộn được trên hầu hết các trang:

Khi chạy, vùng chat trên Discord được cuộn thành công:

Cuộn cho đến khi phần tử xuất hiện

Ví dụ

Giả sử bạn muốn cuộn đến phần hiển thị sản phẩm liên quan trên trang sản phẩm, sau đó thực hiện hành động tiếp theo:

Cấu hình node cuộn chuột:

Kết hợp với node Điều kiện để kiểm tra phần tử đã hiển thị trên màn hình chưa. Lấy selector [id="image-tags"] và cấu hình Element visible in screen:

Nối các node:

Kết quả khi chạy - cuộn đến đúng vị trí mong muốn: