how to emulate a user clicking on the scroll navigation

user_11402587 0
Viewed 434

I'm updating this question to be more inline with what I have now found to be the requirement.

Previously I used setintervalTimer to create a scroll event, using window.scrollTo, this is not an option as the currently running JavaScript on the page causes the scroll to be very laggy.

Is this possible?

  1. I am hoping to find a way to interact with the browser by simulating the user clicking on the browser scroll bar and it being dragged to the bottom of the page. This is to screen record the whole website and all its interactions.

If there is another way this can be achieved (please rember JS is not a performant option right now) - then please let me know.

Thanks - Wally

scroll user-interface python javascript
1 Answers

I don't think there is a way to simulate the user clicking on the scrollbar, but there is a native javascript way to smooth-scroll.

If you want to scroll to a specific y-coordinate or x-coordinate on the page, then use this:

// "Top" is y-coordinate
// "Left is x-coordinate
window.scroll({
  top: 100, 
  left: 0, 
  behavior: 'smooth'
});

Or, if you want to scroll a certain amount from where you already are, you can use this:

window.scrollBy({ 
  top: 100, // could be negative
  left: 0, 
  behavior: 'smooth' 
});

Lastly, if you want to scroll to a certain HTML5 element, you can use this:

document.querySelector('.exampleElement').scrollIntoView({ 
  behavior: 'smooth' 
});

Here is an example (For the example I am using a bunch of line breaks make the page scrollable): 

document.querySelector('#here').scrollIntoView({ 
  behavior: 'smooth' 
});
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1>Not Here!</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1 id="here">Here!</h1>

EDIT: These methods may only work on updated browsers

user_152625820
Related