jquery scrollTop не видит последний добавленный элемент

Question

Почему scrollTop не видит элемент, который мы только что добавили в массив push

if (this.dialogSelect > 0){
    window.Echo.private('chat.' + this.dialogSelect)
        .listen('DialogMessage',({data,user_id}) => {
                this.messages.push({
                    avatar: this.userAuth.avatar,
                    fullname: this.userAuth.fullname,
                    user_id: this.userAuth.id,
                    replay: data
                });
            $('.chat--messages__wrapper').scrollTop($('.chat--messages__wrapper').prop('scrollHeight'));
        })
        .listenForWhisper('typing', (e) => {

        });
}

Answer 1

Для того, чтобы отследить scrollTop высота элемента должна:
Содержать тот самый скролл и быть соответственно больше своего блока.
Очевидно, что у Вас просто не появляется скролл в окне.

Вот пример:

   $('#but').on('click', function () {
        let bz = $('.chat--messages__wrapper').scrollTop();
        console.log(bz);
    });

    .chat--messages__wrapper {
        overflow:scroll;
        height: 300px;
        width: 300px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat--messages__wrapper"><p>Очень много букв, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много буков, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается
    </p>
</div>
<button id="but">Получить scrollTop</button>

Вот правильный вариант элемента: (Обратите внимание, что элемент СТРОГО БОЛЬШЕ заданных параметров высоты и ширины, и установлен скролл.

    $('.chat--messages__wrapper').width("100px");
    $('.chat--messages__wrapper').height("100px");
    $('.chat--messages__wrapper').css('overflow','scroll');
    $('#but').on('click', function () {
        let bz = $('.chat--messages__wrapper').scrollTop();
        console.log(bz);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat--messages__wrapper"><p>Очень много букв, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много буков, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается
    </p>
</div>
<button id="but">Получить scrollTop</button>

Не устанавливая эти параметры ничего работать не будет!
Если не установлена ширина или высота, то элемент будет занимать ВСЁ свободное пространство, из-за чего не появиться и скролла.
Тоже самое будет, в случае, если НЕ установлен скролл элементу, через overflow, Так как скролла просто НЕТ.

Если Вы хотите использовать скролл НЕ конкретного элемента, а общий скролл окна, тогда используйте $(window).scrollTop();
Пример:

    $('.chat--messages__wrapper').width("100px");
    $('#but').on('click', function () {
        let bz = $(window).scrollTop();
        console.log(bz);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat--messages__wrapper"><p>Очень много букв, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много буков, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается, Очень много текста, аж не умещается
    </p>
</div>
<button id="but">Получить scrollTop</button>

БЛОГ НА HUSL

jquery scrollTop не видит последний добавленный элемент

Ответы (1 шт):