How to scroll down all the way in a particular element?

I tried to search for a solution and found none. I tried to pay to seemingly a JS expert and he failed to supply a solution.

In facebook.com there’s your conversations page.

In desktop view, you can scroll down this div to see all your messages.

The div’s class is .uiScrollableAreaBody.

I desire to go into the conversations page, execute in console the relevant code, and start to scroll down until the possible end, until I’ll be scrolled down maximally (after all scroll down “stops” or “stations” have been passed by my script).

In other words, I desire to scroll down to the end of the “conversations” window automatically.

That’s instead me need to site there and scroll down, “stop after stop” or “station after station” (sorry or the terminology, I know nothing better than these terms to describe it).

The 10-15 seconds I’ll wait in facebook aren’t really a long time of course but I do want to learn the general principle here to do that in other times.

Do you know how to do so?

BTW, I just give facebook.com’s conversations page as an example - I call no one to scrap that site or any other site.

If i understand it correctly below code is what you’re looking for. May be “JS expert” wasn’t clear of requirement, or may be i am not.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

`


Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

`

<script> $('#div1').scrollTop($('#div1')[0].scrollHeight); </script>

This piece of code will scroll the cursor to the bottom of the div, as soon as page loads…
If this is what you’re looking for, you owe me money.

Sadly, this didn’t work there:

$('#div1').scrollTop($('.uiScrollableAreaBody')[0].scrollHeight);

Try it in the link please, to see the output.

I didn’t know you want me to write a script to be inserted in facebook message screen for you. Good luck with that.

That’s indeed not possible because chunks of content are getting lazy-loaded asynchronously whenever you reach the bottom of the div. Initially the element only has a certain height, and that’s all you can scroll.

If you want to apply something like that on your own page (while still using lazy-loading), you might check out the solution of discourse: if you visit a long thread here and press the “end” key, the viewport jumps to the end of the page and only loads the last chunk of content. But if you want to hijack another site to achieve that effect, you’d have to know its backend API (or try to infer it from the network activity and source code, but oh well…).

That worked:

setInterval(()=>{
document.querySelector(".uiScrollableAreaWrap").scrollTop=10000;
}, 1000);

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.