Database |> Language |> Keywords |>
SCROLL
Contents
Definition
Sometimes content on a page won’t render until the user’s reached a certain scroll position (ie infinite scroll), the SCROLL keyword can help with that.
FROM url
|> SCROLL TO <target>
|> SELECT field
The second word in the expression must be TO and the scroll target can be one of the following three values: BOTTOM, TOP, or a CSS selector
BOTTOM
When you want to scroll to the bottom of the page simply write BOTTOM as being the target you want to scroll to.
|> SCROLL TO BOTTOM
TOP
When you want to scroll to the top of the page then write TOP as being the target you want to scroll to.
|> SCROLL TO TOP
Selector
When you want to scroll so that an element matching a particular CSS selector is visible then pass in the selector string or a variable holding a CSS selector as the target.
|> SCROLL TO span#id-of-element
Or, with a variable
scroll_target <| span#id-of-element |
FROM url
|> SCROLL TO scroll_target
|> ...
Examples
Infinite scroll
The documentation for a library that provides infinite scroll features a neat property where it itself uses infinite scroll.
infinite_scroll <| https://infinite-scroll.com/ |
FROM infinite_scroll
Let’s go the bottom of the page where we can click on the button at the bottom labeled “Infinite scroll rest of site” that enables it and click on it.
infinite_scroll <| https://infinite-scroll.com/ |
infinite_scroll_rest_of_site <| div.site-scroll button |
method_being_called_out <| div.call-out p a code |
FROM infinite_scroll
|> SCROLL TO BOTTOM
|> CLICK ON infinite_scroll_rest_of_page
Once infinite scroll is enabled, let’s scroll to the bottom so we hit a point that triggers invoking fetching of the API documentation. Lastly, we’ll pluck the particular jQuery method that they call out for being broken when chaining methods.
infinite_scroll <| https://infinite-scroll.com/ |
infinite_scroll_rest_of_page <| div.site-scroll button |
method_being_called_out <| div.call-out p a code |
FROM infinite_scroll
|> SCROLL TO BOTTOM
|> CLICK ON infinite_scroll_rest_of_page
|> SCROLL TO BOTTOM
|> SELECT method_being_called_out
Changing URL
For giggles, the URL for the inifinite scroll library documentation also changes value as you reach certain scroll states. To see the URL for the API documentation, simply select the URL instead.
infinite_scroll <| https://infinite-scroll.com/ |
infinite_scroll_rest_of_page <| div.site-scroll button |
FROM infinite_scroll
|> SCROLL TO BOTTOM
|> CLICK ON infinite_scroll_rest_of_page
|> SCROLL TO BOTTOM
|> SELECT URL
