1

Почему 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) => {

        });
}

1 ответ 1

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>

9
  • он не видит последний добавленный элемент, например вот в такой элемент срабатывает psuh и если я вывожу console.log($(body).find('.chat--messages__item:last').height()) то выдает высоту предпоследнего
    – Aslero
    17 фев 2020 в 20:29
  • @Aslero Почитайте, пожалуйста, внимательнее. У Элемента должен быть скролл. Если скролла нет, то и значение будет undefined
    – Denis640Kb
    17 фев 2020 в 20:30
  • то есть из-за этого может не срабатывать? .chat--messages__wrapper { -ms-overflow-style: none; scrollbar-width: none; }
    – Aslero
    17 фев 2020 в 20:31
  • @Aslero, Да, всё верно. Просто если скролла нет, то и получать данные ни js ни jquery никак не могут =( А вы хотите получить именно высоту скролла? Или какая-то другая задача? Может есть более простые варианты решения Вашей задачи.
    – Denis640Kb
    17 фев 2020 в 20:33
  • у меня система диалогов и скролл скрыт, при новом сообщении, скролл должен опускаться в самый низ
    – Aslero
    17 фев 2020 в 20:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.