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

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

17.02.2020 10:49:53 Просмотров 25 Источник

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

        });
}
У вопроса есть решение - Посмотреть?

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

Denis640Kb

17.02.2020 11:24:45

Для того, чтобы отследить 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>

https://ru.stackoverflow.com/questions/1084009/jquery-scrolltop-%d0%bd%d0%b5-%d0%b2%d0%b8%d0%b4%d0%b8%d1%82-%d0%bf%d0%be%d1%81%d0%bb%d0%b5%d0%b4%d0%bd%d0%b8%d0%b9-%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%bb%d0%b5%d0%bd%d0%bd%d1%8b%d0%b9-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82/1084017#comment1863801_1084017
он не видит последний добавленный элемент, например вот в такой элемент срабатывает psuh и если я вывожу console.log($(body).find('.chat--messages__item:last').heigh‌​t()) то выдает высоту предпоследнего
https://ru.stackoverflow.com/questions/1084009/jquery-scrolltop-%d0%bd%d0%b5-%d0%b2%d0%b8%d0%b4%d0%b8%d1%82-%d0%bf%d0%be%d1%81%d0%bb%d0%b5%d0%b4%d0%bd%d0%b8%d0%b9-%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%bb%d0%b5%d0%bd%d0%bd%d1%8b%d0%b9-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82/1084017#comment1863803_1084017
@Aslero Почитайте, пожалуйста, внимательнее. У Элемента должен быть скролл. Если скролла нет, то и значение будет undefined
https://ru.stackoverflow.com/questions/1084009/jquery-scrolltop-%d0%bd%d0%b5-%d0%b2%d0%b8%d0%b4%d0%b8%d1%82-%d0%bf%d0%be%d1%81%d0%bb%d0%b5%d0%b4%d0%bd%d0%b8%d0%b9-%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%bb%d0%b5%d0%bd%d0%bd%d1%8b%d0%b9-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82/1084017#comment1863805_1084017
то есть из-за этого может не срабатывать? .chat--messages__wrapper { -ms-overflow-style: none; scrollbar-width: none; }
https://ru.stackoverflow.com/questions/1084009/jquery-scrolltop-%d0%bd%d0%b5-%d0%b2%d0%b8%d0%b4%d0%b8%d1%82-%d0%bf%d0%be%d1%81%d0%bb%d0%b5%d0%b4%d0%bd%d0%b8%d0%b9-%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%bb%d0%b5%d0%bd%d0%bd%d1%8b%d0%b9-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82/1084017#comment1863808_1084017
@Aslero, Да, всё верно. Просто если скролла нет, то и получать данные ни js ни jquery никак не могут =( А вы хотите получить именно высоту скролла? Или какая-то другая задача? Может есть более простые варианты решения Вашей задачи.
https://ru.stackoverflow.com/questions/1084009/jquery-scrolltop-%d0%bd%d0%b5-%d0%b2%d0%b8%d0%b4%d0%b8%d1%82-%d0%bf%d0%be%d1%81%d0%bb%d0%b5%d0%b4%d0%bd%d0%b8%d0%b9-%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%bb%d0%b5%d0%bd%d0%bd%d1%8b%d0%b9-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82/1084017#comment1863826_1084017
у меня система диалогов и скролл скрыт, при новом сообщении, скролл должен опускаться в самый низ
https://ru.stackoverflow.com/questions/1084009/jquery-scrolltop-%d0%bd%d0%b5-%d0%b2%d0%b8%d0%b4%d0%b8%d1%82-%d0%bf%d0%be%d1%81%d0%bb%d0%b5%d0%b4%d0%bd%d0%b8%d0%b9-%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%bb%d0%b5%d0%bd%d0%bd%d1%8b%d0%b9-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82/1084017#comment1863831_1084017
@Aslero Там же есть какой-то элемент снизу. Можно просто опускать страницу до этого элемента и неважно, есть скролл или нет )
https://ru.stackoverflow.com/questions/1084009/jquery-scrolltop-%d0%bd%d0%b5-%d0%b2%d0%b8%d0%b4%d0%b8%d1%82-%d0%bf%d0%be%d1%81%d0%bb%d0%b5%d0%b4%d0%bd%d0%b8%d0%b9-%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%bb%d0%b5%d0%bd%d0%bd%d1%8b%d0%b9-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82/1084017#comment1863845_1084017
делаю вот так $('.chat--messages__wrapper').scrollTop($('.chat--messages__‌​wrapper').prop('scro‌​llHeight')+1000); но все ровно, как буд-то не видит только что добавленный элемент в массив
https://ru.stackoverflow.com/questions/1084009/jquery-scrolltop-%d0%bd%d0%b5-%d0%b2%d0%b8%d0%b4%d0%b8%d1%82-%d0%bf%d0%be%d1%81%d0%bb%d0%b5%d0%b4%d0%bd%d0%b8%d0%b9-%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%bb%d0%b5%d0%bd%d0%bd%d1%8b%d0%b9-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82/1084017#comment1864197_1084017
@Aslero Ещё раз. Читайте очень внимательно... Если ширина или высота БОЛЬШЕ, самого блока, и НЕ установлено значение скролла элементу, то и получать НЕЧЕГО. То, что делаете Вы - совершенно никак не добавляет элементу НИ того НИ другого. Соответственно и значения у Вас просто не будет.
https://ru.stackoverflow.com/questions/1084009/jquery-scrolltop-%d0%bd%d0%b5-%d0%b2%d0%b8%d0%b4%d0%b8%d1%82-%d0%bf%d0%be%d1%81%d0%bb%d0%b5%d0%b4%d0%bd%d0%b8%d0%b9-%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%bb%d0%b5%d0%bd%d0%bd%d1%8b%d0%b9-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82/1084017#comment1864204_1084017
@Aslero Добавил в ответ ещё информации.
Закрыть X