حل شده

اسکرول کردن با جاوااسکریپت

4 پاسخ

سلام وقتتون بخیر

scrollTop not working !!! 😥

تو تملیت persianAdminLte یه div دارم که هر کاری میکنم با جاوا اسکریپت اسکرول نمیشه ...

هدفم اینه که بصورت پیش فرض اسکرول تهش باشه (یا اینکه بره تهش !)

این کد جاوا اسکریپت :
( تابع رو تو load هم گذاشتم ... settimeout هم گذاشتم ولی نشد...


scrollToBottom($('.message-chat-box'));

function scrollToBottom(objDiv){
    objDiv.scrollTop(objDiv[0].scrollHeight);
}

این کد html

        <div class="col-12 col-lg-8 col-xl-9 p-0 ltr message-chat-box max-height-content-wrapper">
            <div class="message-chat-box-gradiant h-100 max-height-content-wrapper">
                <div class="d-flex flex-column">

                    <div class="message-chat-box-message my-2 mx-3 p-3 elevation-2 sender">
                    </div>
                    <div class="message-chat-box-message my-2 mx-3 p-3 elevation-2 sender">
                    </div>
                    <div class="message-chat-box-message my-2 mx-3 p-3 elevation-2 receiver">
                    </div>
                    <div class="message-chat-box-message my-2 mx-3 p-3 elevation-2 receiver">
                    </div>
                    <div class="message-chat-box-message my-2 mx-3 p-3 elevation-2 receiver">
                    </div>
                    <div class="message-chat-box-message my-2 mx-3 p-3 elevation-2 receiver">
                    </div>
                </div>
            </div>
        </div>

این هم css

.message-users-box, .message-chat-box, .message-chat-box-gradiant {
  overflow-x: hidden;
  overflow-y: auto;
}

جاوااسکریپت javascript bootstrap flexbox

افشار محمودیان

@afsharmahmoodian

ثبت پرسش جدید

پاسخ‌ها

محمدحسن یگانه

@mhyeganeh4 سال پیش مطرح شد

تخصص: Full-Stack Web Developer Freelancer

بهترین پاسخ

احتمالا علتش یکی از دو کلاسی هست که برای المنت مورد نظر استفاده شده:

"h-100 max-height-content-wrapper"

و باید بررسی کنید هر یک از کلاس های چه استایل هایی رو اعمال می‌کنند و کدومش باعث ایجاد مشکل میشه.

ارسال پاسخ

افشار محمودیان

@afsharmahmoodian4 سال پیش مطرح شد

تخصص: برنامه نویس

با حذف این المنت درست شد ، اما یکی بگه why ???

<div class="message-chat-box-gradiant h-100 max-height-content-wrapper">
</div>

ارسال پاسخ

محمد حسین

@saghari4 سال پیش مطرح شد

تخصص: mevn stack

اگه میخواین با زدن روی یه button اسکرول بشه به بالای صفحه میتونید اینطوری بنویسید:
html:

<button class="scroll"></button>

css:

.scroll {
    background-image: url('arrow_top.svg');
    background-color: rgb(200, 0, 0);
    background-repeat: no-repeat;
    background-position: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    position: fixed;
    left: 20px;
    bottom: 20px;
    cursor: auto !important;
    opacity: 0;
    transition: opacity 0.5s;
}

.scroll.scrollshow {
    opacity: 0.75;
    cursor: pointer !important;
}

js:

let scroll = document.querySelector(".scroll")

window.addEventListener("scroll", e => {
    if (window.scrollY > 0) {
        scroll.classList.add("scrollshow")
    } else {
        scroll.classList.remove("scrollshow")
    }
})

scroll.addEventListener("click", e => {
    if (scroll.classList.contains("scrollshow")) {
        window.scrollTo({top: 0, behavior: "smooth"})
    }
})

ارسال پاسخ

شاید پاسخ شما همین‌جا باشد

@afsharmahmoodian4 سال پیش مطرح شد

تخصص: برنامه نویس

@mhyeganeh
اره ممنون
بعدش بررسی کردم دیدم کلاس max-height-content-wrapper رو تو جاوا اسکریپت استایل میدادم و مشکل ساز میشد ... همچنین h-100...
آخرش از flex-column-reverse استفاده کردم و اصلا نیازی به جاوااسکریپت نشد 😄

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

اسکرول کردن با جاوااسکریپت

پاسخ‌ها

گفتگوهای مرتبط

مشکل کند شدن صفحه به دلیل استفاده از setInterval

معرفی چند پلاگین مفید جاوا اسکریپت

اسکرول کردن دستی با موس در اسلایدر محصول ساخته شده با css

اسکرول بینهایت

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید