php - Changing the order of rendering items in ListView with yii2-scroll-pager -- Yii2 chat module

one text

I want to make a chat system in my web application which is made with Yii2, at the moment I am using ListView for rendering the chat messages and yii2-scroll-pager extension for loading more messages. but the problem is ListView renders items in the order and scroll-pager fires load more even when I scroll down to the last item but what I want to achieve is, that I should not scroll down instead I should scroll up to load more messages, for example.

Current state

• Message 1
• Message 2
• Message 3
• Message 4
• Message 5 -- when I scroll down to this message it fires load more event.

Desired outcome

• Message 5 -- when I scroll up to this item event of loading more items should be fired.
• Message 4
• Message 3
• Message 2
• Message 1

Here is my current stage of code.

View File

<?=
                    \yii\widgets\ListView::widget([
                        'itemOptions' => ['tag' => false],
                        'options' => [
                            'tag' => 'ul',
                            'class' => 'chat-message',
                            'id' => 'chat-messages'
                        ],
                        'dataProvider' => $msgDataProvider,
                        'itemView' => "_chat_item",
                        'summary' => '',
                        'pager' => [
                            'class'=> \kop\y2sp\ScrollPager::className(),
                            'triggerOffset' => $msgDataProvider->pagination->pageSize,
                            'enabledExtensions' => [
                                ScrollPager::EXTENSION_TRIGGER,
                                ScrollPager::EXTENSION_PAGING,
                                ScrollPager::EXTENSION_NONE_LEFT,
                                ScrollPager::EXTENSION_SPINNER
                            ],
                            'container' => "#chat-messages",
                            'item' => ".message-item",
                            'paginationSelector' => '#chat-messages .pagination',
                            'overflowContainer' => '.scrollbar-wrapper',
                            'noneLeftText' => 'No more messages.'
                        ]
                    ]); ?>

Controller

public function actionInbox()
    {
        $thread = 2;
        $dataProvider = new ActiveDataProvider([
            'query' => Chat::find()
                ->where(['from_user' => $thread, 'to_user' => \Yii::$app->user->getId()])
                ->orWhere(['from_user' => \Yii::$app->user->getId(), 'to_user' => $thread]),
            'pagination' => [
                'pageSize' => 5
            ],
            'sort' => [
                'defaultOrder' => [
                    'id' => SORT_DESC,
                ]
            ],
        ]);
        return $this->render("inbox", ['dataProvider' => $dataProvider]);
    }