Is there some JavaScript code I can execute to scroll to the top of the messages box on Facebook? So when you click 'see all' and go the main message page, if you scroll up it loads more messages. I want to force the it to keep scrolling up to keep loading messages. I've tried

document.body.scrollTop = document.documentElement.scrollTop = 0;

But that of course only scrolls to the top of the actual page. Any ideas on how to scroll the messages box up?

Is there some JavaScript code I can execute to scroll to the top of the messages box on Facebook? So when you click 'see all' and go the main message page, if you scroll up it loads more messages. I want to force the it to keep scrolling up to keep loading messages. I've tried

document.body.scrollTop = document.documentElement.scrollTop = 0;

But that of course only scrolls to the top of the actual page. Any ideas on how to scroll the messages box up?

• javascript
• facebook
• scroll

3 Answers 3

Select a conversation and try this script (load it through the console):

var autoLoad = {

    messagesContainer: document.querySelector('#contentArea [role=main] .uiScrollableAreaContent'),

    start: function (speed) {
        var messagesContainer = this.messagesContainer,
            loadMore = document.querySelector('[role=log] .pam.uiBoxLightblue.uiMorePagerPrimary');
        speed = parseInt(speed, 10) || 1000;
        clearInterval(this.interval);
        this.interval = setInterval(function () {
            messagesContainer.style.top = '0px';
            loadMore.click();
        }, speed);
    },

    stop: function () {
        clearInterval(this.interval);
        this.messagesContainer.style.top = '';
    }

};

To start it, type:

// Takes a 'speed' parameter, defaults to 1000 milliseconds
autoLoad.start(1200);

And to stop it (necessary for the scrollbar to re-appear):

autoLoad.stop();

Explanation:

After exploring Facebook's DOM, I found some selectors that specifically target the elements that are needed for this to work:

• The messages container, which holds the messages
• The 'load more' link, that triggers facebook's script in charge of loading more messages.

The messages container scrollable area doesn't use native scrolling, instead, it uses bottom and top to set it's current scroll position.

So, if you want to scroll to the top, you set the container to top: '0', and since this way, the messages auto-load AJAX only triggers once, you need to trigger it manually after every scroll to top. I managed to do this simply by executing click in the link that triggers the AJAX.

I tried to get the most specific classes/selectors that I could find, and the ones that sounded more general, since I don't know if Facebook generates ids/classes dynamically in some way.

I tested this under Firefox and Chrome, explore the code a bit and change it to fit your needs. I hope this works for you as is, otherwise, you can use the DOM explorer to find the appropriate selectors.

I had to tweak the script to use "scrollTop" instead of "style.top".

var autoLoad = {

messagesContainer: document.querySelector('#globalContainer [role=main] .uiScrollableAreaContent'),

start: function (speed) {
    var messagesContainer = this.messagesContainer,
        loadMore = document.querySelector('#js_d');
    speed = parseInt(speed, 10) || 1000;
    clearInterval(this.interval);
    this.interval = setInterval(function () {
        messagesContainer.scrollTop = 0;
        loadMore.scrollTop = 0;
        /* loadMore.click(); */
    }, speed);
},

stop: function () {
    clearInterval(this.interval);
    this.messagesContainer.style.top = '';
}

};

Nov 2021 @user4698813 code update:

var autoLoad = {
    messagesContainer: document.querySelector('[role=main]'),

    start: function (speed) {
        var messagesContainer = this.messagesContainer,
            loadMore = document.querySelector('[data-release-focus-from]');
        speed = parseInt(speed, 10) || 1000;
        clearInterval(this.interval);
        this.interval = setInterval(function () {
            messagesContainer.scrollTop = 0;
            loadMore.scrollTop = 0;
            /* loadMore.click(); */
        }, speed);
    },

    stop: function () {
        clearInterval(this.interval);
        this.messagesContainer.style.top = '';
    }
};