Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Запретить автопрокрутку при условии (https://javascript.ru/forum/misc/84284-zapretit-avtoprokrutku-pri-uslovii.html)

Ubivectel 28.07.2022 19:27
Запретить автопрокрутку при условии
 
Привет мир.

Имеем чат, сообщения выводятся внизу и автоматически прокручиваются, однако это неудобно кода читаешь переписку выше, вроде как нашел два фрагмента кода которые это делают:

if (this.order == "bottom") {
            this.insertAfter(nodo, insertO.lastChild);
        } else insertO.insertBefore(nodo, insertO.firstChild);
        if (!yo && this.sound == 1) this.play_msg_sound();
        this.ajustar_scroll();



kide.ajustar_scroll = function() {
    if (kide.scrolling) return;
    if (kide.order == "bottom")
        kide.attr(
            "KIDE_msgs",
            "scrollTop",
            kide.attr("KIDE_msgs", "scrollHeight")
        );
    else kide.attr("KIDE_msgs", "scrollTop", 0);
};


Но как дописать условие толку как всегда не хватает :help:

Ubivectel 28.07.2022 19:31
Ах да, не написал чего хочу ))) Запретить прокрутку если сдержимое дива не равно bottom: 0;

Nexus 28.07.2022 19:39
Перед добавлением нового сообщения посмотрите на scrollTop контентной области, если она прокручена не максимально, не скрольте страницу.

Ubivectel 28.07.2022 19:42
Я логику-то как раз понимаю, моя беда синтаесис (

рони 28.07.2022 21:33
Ubivectel,
пробуй ...
let scroll = true;
if (this.order == "bottom") {
            scroll = this.attr("KIDE_msgs", "scrollTop") > (this.attr("KIDE_msgs", "scrollHeight") - this.attr("KIDE_msgs", "clientHeight"));
            this.insertAfter(nodo, insertO.lastChild);
        } else insertO.insertBefore(nodo, insertO.firstChild);
        if (!yo && this.sound == 1) this.play_msg_sound();
if(scroll) this.ajustar_scroll();

Ubivectel 28.07.2022 21:48
Хммм, не сработало, вот оно: https://noviy-kovcheg.ru/smoking

рони 28.07.2022 22:13
Ubivectel,
kide.js в строке 202 и прочих пусто

Ubivectel 28.07.2022 22:22
Не в тот шаблон внес изменения, торможу, сейчас звменил там где надо, но не срабатывает (

рони 28.07.2022 22:45
Ubivectel,
верни как было всё.

Ubivectel 28.07.2022 22:46
Сделал

рони 28.07.2022 22:49
Ubivectel,
замени целиком 

kide.ajustar_scroll = function() {
    if (kide.scrolling) return;
    let scroll = kide.attr("KIDE_msgs", "scrollTop") - (kide.attr("KIDE_msgs", "scrollHeight") - kide.attr("KIDE_msgs", "clientHeight"));
    if(scroll < -100) return;
    if (kide.order == "bottom")
        kide.attr(
            "KIDE_msgs",
            "scrollTop",
            kide.attr("KIDE_msgs", "scrollHeight")
        );
    else kide.attr("KIDE_msgs", "scrollTop", 0);
};

Ubivectel 28.07.2022 22:52
Сделал вроде

рони 28.07.2022 22:58
Ubivectel,
что-то не так, верни всё всё как было, потом скопируй #11 и замени

Ubivectel 28.07.2022 23:04
Вроде бы все четко сейчас сделал, не прокручивает, но и новые сообщения не отображаются

рони 28.07.2022 23:07
Цитата:
Сообщение от Ubivectel
новые сообщения не отображаются
значит kide.insertNewContent запорол))) смотри что в ней не так

рони 28.07.2022 23:13
Ubivectel,
или где -то стёр пару элементов
let audio = document.getElementById('song'); ??
let ulcontent = document.querySelector('.ulcontent'); ??

Ubivectel 28.07.2022 23:19
Вот дефолт:

kide.insertNewContent = function(
    uid,
    name,
    text,
    url,
    ti,
    color,
    rango,
    id,
    sesion,
    yo,
    hora,
    img
) {
    if (text.replace(/ /g, "") != "") {
        let c =
            color.length > 0 ?
            'style="color:#' + color + '" class="KIDE_msg"' :
            'class="KIDE_dc_' + this.rangos[rango] + ' KIDE_msg"';
        let div = this.$("KIDE_msgs");
        let nodo = document.createElement("div");
        let insertO = this.$("KIDE_output");
        let s_hora;
        let bquote = document.querySelector("#insertmsg");
        nodo.setAttribute("id", "KIDE_id_" + id);
        nodo.setAttribute("class", "KIDE_msg_top");
        if (this.show_hour)
            s_hora =
            '<span title="' +
            ti +
            '" class="KIDE_msg_hour">' +
            hora +
            "</span> ";
        else s_hora = "";
        let tmp = "";
        if (img && kide.show_avatar) {
            let style = kide.avatar_maxheight ?
                'style="max-height:' + kide.avatar_maxheight + '" ' :
                "";
            tmp =
                "<img " +
                style +
                'src="' +
                img +
                '" class="KIDE_icono" alt="" /> ';
        }
        nodo.innerHTML =
            s_hora +
            tmp +
            '<span style="cursor: pointer" class="KIDE_' +
            this.rangos[rango] +
            '" onclick="kide.insertSmile(\'' + //mod
            name +
            ", ')\" oncontextmenu=\"event.preventDefault();document.querySelector(\'.overlayo\').style.display = \'block\';kide.mensaje('" +
            name +
            "', " +
            uid +
            ", " +
            id +
            ", '" +
            url +
            "', '" +
            ti +
            "', '" +
            sesion +
            "', " +
            rango +
            ", '" +
            img +
            "')\">" +
            name +
            "</span>: <span " +
            c +
            ">" +
            this.filter_smilies(text) +
            "</span>" + "<i class='fa fa-reply qutes' title='Цитировать' aria-hidden='true'></i>" +
            "<i class='fa fa-clipboard K_copy' title='Копировать' aria-hidden='true'></i>" + //mod
            "<span class='editors'><i class='fa fa-pencil' title='Редактировать' aria-hidden='true'></i></span>"; //mod

        if (this.order == "bottom") {
            this.insertAfter(nodo, insertO.lastChild);
        } else insertO.insertBefore(nodo, insertO.firstChild);
        if (!yo && this.sound == 1) this.play_msg_sound();
        this.ajustar_scroll();
    }
};


Вот модификация:

kide.insertNewContent = function (
    uid,
    name,
    text,
    url,
    ti,
    color,
    rango,
    id,
    sesion,
    yo,
    hora,
    img
) {
    if (text.replace(/ /g, "") != "") {
        let c =
            color.length > 0 ?
                'style="color:#' + color + '" class="KIDE_msg"' :
                'class="KIDE_dc_' + this.rangos[rango] + ' KIDE_msg"';
        let div = this.$("KIDE_msgs");
        let nodo = document.createElement("div");
        let insertO = this.$("KIDE_output");
        let s_hora;
        let bquote = document.querySelector("#insertmsg");
        nodo.setAttribute("id", "KIDE_id_" + id);
        nodo.setAttribute("class", "KIDE_msg_top");
        if (this.show_hour)
            s_hora =
                '<span title="' +
                ti +
                '" class="KIDE_msg_hour">' +
                hora +
                "</span> ";
        else s_hora = "";
        let tmp = "";
        if (img && kide.show_avatar) {
            let style = kide.avatar_maxheight ?
                'style="max-height:' + kide.avatar_maxheight + '" ' :
                "";
            tmp =
                "<img " +
                style +
                'src="' +
                img +
                '" class="KIDE_icono" alt="" /> ';
        }
        nodo.innerHTML =
            s_hora +
            tmp +
            '<span style="cursor: pointer" class="KIDE_' +
            this.rangos[rango] +
            '" onclick="kide.insertSmile(\'' + //mod
            name +
            ", ')\" oncontextmenu=\"event.preventDefault();document.querySelector(\'.overlayo\').style.display = \'block\';kide.mensaje('" +
            name +
            "', " +
            uid +
            ", " +
            id +
            ", '" +
            url +
            "', '" +
            ti +
            "', '" +
            sesion +
            "', " +
            rango +
            ", '" +
            img +
            "')\">" +
            name +
            "</span>: <span " +
            c +
            ">" +
            this.filter_smilies(text) +
            "</span>" + "<i class='fa fa-reply qutes' title='Цитировать' aria-hidden='true'></i>" +
            "<i class='fa fa-clipboard K_copy' title='Копировать' aria-hidden='true'></i>" + //mod
            "<span class='editors'><i class='fa fa-pencil' title='Редактировать' aria-hidden='true'></i></span>"; //mod

        /* if (this.order == "bottom") {
            this.insertAfter(nodo, insertO.lastChild);
        } else insertO.insertBefore(nodo, insertO.firstChild);
        if (!yo && this.sound == 1) this.play_msg_sound();
        this.ajustar_scroll(); */

        kide.ajustar_scroll = function () {
            if (kide.scrolling) return;
            let scroll = kide.attr("KIDE_msgs", "scrollTop") - (kide.attr("KIDE_msgs", "scrollHeight") - kide.attr("KIDE_msgs", "clientHeight"));
            if (scroll < -100) return;
            if (kide.order == "bottom")
                kide.attr(
                    "KIDE_msgs",
                    "scrollTop",
                    kide.attr("KIDE_msgs", "scrollHeight")
                );
            else kide.attr("KIDE_msgs", "scrollTop", 0);
        };

    }
};


Не вижу в чем ошибаюсь (

рони 28.07.2022 23:26
Ubivectel,
бред какой то -- восстанови обе функции(kide.insertNewContent и kide.ajustar_scroll ) как они были, потом если всё заработает , kide.ajustar_scroll
попробуй заменить.

рони 28.07.2022 23:27
Цитата:
Сообщение от Ubivectel
Вот дефолт:
его и верни.

Ubivectel 28.07.2022 23:32
Алилуйя, только дошло, что менял не ту функцию )))))))) Спасибо рони, вроде все как надо! :thanks:

рони 28.07.2022 23:40
Ubivectel,
ок! if(scroll < -100) -100 можно подстроить, если нужно, от -50 до -300

Ubivectel 28.07.2022 23:59
Я правильно понимаю, что это диапазон прокрутки с которого начнет работать условие? Т.е. если прокручено меньше -50 / -300 то автопрокрутка будет срабатывать?

рони 29.07.2022 00:34
Ubivectel,
да

Ubivectel 10.11.2024 08:43
Привет мир!

Взбрела в голову мысль добавить счетчик сообщений, если скролл не = 0, сделал так:

kide.ajustar_scroll = function () {
    if (kide.scrolling) return;
    let scroll = kide.attr("KIDE_msgs", "scrollTop") - (kide.attr("KIDE_msgs", "scrollHeight") - kide.attr("KIDE_msgs", "clientHeight"));
   
    if (scroll < -300) {
        document.getElementById('kide-counter').textContent = newMessageCount;
        return;
    }
    if (kide.order == "bottom")
        kide.attr("KIDE_msgs", "scrollTop", kide.attr("KIDE_msgs", "scrollHeight"));
    else kide.attr("KIDE_msgs", "scrollTop", 0);
};


Работает и считает все хорошо, хоть убей не могу заставить код делать 
document.getElementById('kide-counter').textContent = '';

Когда пользователь возвращает прокрутку блока id="KIDE_msgs" вниз ( :help:

рони 10.11.2024 12:06
Ubivectel,
как вариант
если находясь внизу, отправить сообщение, то счётчик обнулится. 
kide.ajustar_scroll = function() {
            if (kide.scrolling) return;
            let scroll = kide.attr("KIDE_msgs", "scrollTop") - (kide.attr("KIDE_msgs", "scrollHeight") - kide.attr("KIDE_msgs", "clientHeight"));
            if (scroll < -300) {
                document.getElementById('kide-counter').textContent = newMessageCount;
                return;
            }
            if (kide.order == "bottom") {
                kide.attr("KIDE_msgs", "scrollTop", kide.attr("KIDE_msgs", "scrollHeight"));
                newMessageCount = 0;
                document.getElementById('kide-counter').textContent = '';
            } else kide.attr("KIDE_msgs", "scrollTop", 0);
        };

Ubivectel 10.11.2024 14:16
Что бы он обнулялся после отправки нового сообщения было довольно легко, я пытался именно добиться что бы он обнулялся сразу при прокрутке блока вниз. Чем и сломал моск не только себе, но и GPT ) Ну не верю, что нет решения для js-всемогущего )

рони 10.11.2024 20:08
Цитата:
Сообщение от Ubivectel
при прокрутке блока вниз
обработчик на прокрутку колёсиком мыши 
document.querySelector("#KIDE_msgs").addEventListener("scroll", function() {
            let scroll = kide.attr("KIDE_msgs", "scrollTop") - (kide.attr("KIDE_msgs", "scrollHeight") - kide.attr("KIDE_msgs", "clientHeight"));
            if (kide.scrolling) return;
            if (scroll > -3) {
                document.getElementById("kide-counter").textContent = "";
                return;
            }
        })

Ubivectel 10.11.2024 21:09
Неа, какую-то подобную конструкцию уже писал, но нет. Посмотреть тут: https://noviy-kovcheg.ru/chatФайл JS вот: https://noviy-kovcheg.ru/components/...top/js/kide.js

Ubivectel 10.11.2024 21:54
Консоль ругается на это: 
document.querySelector("#KIDE_msgs").addEventListener("scroll", function()

рони 10.11.2024 23:21
Цитата:
Сообщение от Ubivectel
Консоль ругается на это:
оберни в 
document.addEventListener("DOMContentLoaded", function()
{...});

Ubivectel 11.11.2024 13:11
Алилуйя, спасибо :dance:

Вот что получилось в итоге:

kide.ajustar_scroll = function () {
    if (kide.scrolling) return;
    let scroll = kide.attr("KIDE_msgs", "scrollTop") - (kide.attr("KIDE_msgs", "scrollHeight") - kide.attr("KIDE_msgs", "clientHeight"));

    if (scroll < -300) {
        document.getElementById('kide-counter').textContent = newMessageCount;
        document.getElementById("kide-counter").style.display = "block";
        return;
    }
    if (kide.order == "bottom")
        kide.attr("KIDE_msgs", "scrollTop", kide.attr("KIDE_msgs", "scrollHeight"));
    else kide.attr("KIDE_msgs", "scrollTop", 0);
};

document.addEventListener("DOMContentLoaded", function () {
    document.querySelector("#KIDE_msgs").addEventListener("scroll", function () {
        let scroll = kide.attr("KIDE_msgs", "scrollTop") - (kide.attr("KIDE_msgs", "scrollHeight") - kide.attr("KIDE_msgs", "clientHeight"));
        if (kide.scrolling) return;
        if (scroll > -3) {
            newMessageCount = 0;
            document.getElementById("kide-counter").textContent = "";
            document.getElementById("kide-counter").style.display = "none";
            return;
        }
    })
});


Но странно, при попытке вынести "kide-counter" в переменную:

let kideCounter = document.getElementById('kide-counter');

kide.ajustar_scroll = function () {
    if (kide.scrolling) return;
    let scroll = kide.attr("KIDE_msgs", "scrollTop") - (kide.attr("KIDE_msgs", "scrollHeight") - kide.attr("KIDE_msgs", "clientHeight"));

    if (scroll < -300) {
        kideCounter.textContent = newMessageCount;
        kideCounter.style.display = "block";
        return;
    }
    if (kide.order == "bottom")
        kide.attr("KIDE_msgs", "scrollTop", kide.attr("KIDE_msgs", "scrollHeight"));
    else kide.attr("KIDE_msgs", "scrollTop", 0);
};

document.addEventListener("DOMContentLoaded", function () {
    document.querySelector("#KIDE_msgs").addEventListener("scroll", function () {
        let scroll = kide.attr("KIDE_msgs", "scrollTop") - (kide.attr("KIDE_msgs", "scrollHeight") - kide.attr("KIDE_msgs", "clientHeight"));
        if (kide.scrolling) return;
        if (scroll > -3) {
            newMessageCount = 0;
            kideCounter.textContent = "";
            kideCounter.style.display = "none";
            return;
        }
    })
});


В принципе без разницы, но очень интересно почему )


Часовой пояс GMT +3, время: 11:15.