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

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

                        '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' => [
                            'container' => "#chat-messages",
                            'item' => ".message-item",
                            'paginationSelector' => '#chat-messages .pagination',
                            'overflowContainer' => '.scrollbar-wrapper',
                            'noneLeftText' => 'No more messages.'
                    ]); ?>


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]);

Order by created time DESC

Well, I think this is not about SQL query, this is more related to sorting when rendering. So even if I select by created_at DESC then dataprovider object will return items like this…
Array(Latest message, 2nd last message, 3rd last, 4th last)
but I want them to be sorted like.
Array(4th last, 3rd last, 2nd last, Latest message)

Is this your thinking or you did an actual test?

Hi, @usama and @evstevemd

So you want to start from the bottom page of the list (i.e., the latest chat items) and scrolling UP to the earlier pages (i.e., earlier chat items). I agree that it is a good UI design. Some commercial softwares (like LINE and others) suppots this kind of behavior.

But, I don’t think yii2-scroll-pager supports this behavior. I believe that it supports only the opposite direction of scrolling … I mean starting from the top page and scrolling DOWN to the next pages.

1 Like

I hope this might be some help to you.

Hi @softark,
Hope you do well!

I just realized that OP asked about yii-scroll-pager :man_facepalming:

Hi @evstevemd,

I’ve been kind of depressed by what’s going on in this cruel world and especially in my own god damned foolish country Japan.
But, yeah, I’m feeling OK being with friends like you.

1 Like

Sorry! Don’t get depressed.
This is the world we live in, we have to live in!