اسکرول کردن با جاوااسکریپت
سلام وقتتون بخیر
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;
}
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
احتمالا علتش یکی از دو کلاسی هست که برای المنت مورد نظر استفاده شده:
"h-100 max-height-content-wrapper"و باید بررسی کنید هر یک از کلاس های چه استایل هایی رو اعمال می‌کنند و کدومش باعث ایجاد مشکل میشه.
با حذف این المنت درست شد ، اما یکی بگه why ???
<div class="message-chat-box-gradiant h-100 max-height-content-wrapper">
</div>
اگه میخواین با زدن روی یه 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"})
}
})احتمالا علتش یکی از دو کلاسی هست که برای المنت مورد نظر استفاده شده:
"h-100 max-height-content-wrapper"و باید بررسی کنید هر یک از کلاس های چه استایل هایی رو اعمال می‌کنند و کدومش باعث ایجاد مشکل میشه.
@mhyeganeh
اره ممنون
بعدش بررسی کردم دیدم کلاس max-height-content-wrapper رو تو جاوا اسکریپت استایل میدادم و مشکل ساز میشد ... همچنین h-100...
آخرش از flex-column-reverse استفاده کردم و اصلا نیازی به جاوااسکریپت نشد 😄