از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
در دنیای توسعه وب، اغلب لازم است مشخص شود که آیا یک عنصر HTML پس از پیمایش قابل مشاهده است یا خیر. این می تواند به دلایل مختلفی مانند راه اندازی انیمیشن ها، بارگذاری پویا محتوا یا ردیابی رفتار کاربر بسیار مهم باشد.
در این بایت، روش بررسی نمایان بودن یک عنصر پس از پیمایش در جاوا اسکریپت ساده و جی کوئری را بررسی خواهیم کرد.
مشاهده عنصر در DOM
قبل از ورود به کد، مهم است که منظور ما از قابلیت مشاهده یک عنصر در DOM چیست. وقتی در مورد قابل مشاهده بودن یک عنصر صحبت می کنیم، منظور ما این است که در داخل عنصر قرار دارد درگاه دید، یعنی بخشی از صفحه وب که در حال حاضر در پنجره مرورگر قابل مشاهده است. یک عنصر می‌تواند در DOM وجود داشته باشد، اما اگر خارج از نمای درت باشد، چه در بالا یا پایین ناحیه‌ای که در حال حاضر مشاهده می‌شود، همچنان نامرئی خواهد بود.
توجه داشته باشید: یک عنصر همچنین می تواند نامرئی باشد اگر با استفاده از ویژگی های CSS مانند پنهان باشد display: none یا visibility: hidden. با این حال، برای هدف این مقاله، ما فقط به دید از نظر دید در نظر داریم.
چرا نمایان بودن عنصر را بعد از اسکرول بررسی کنید؟
ممکن است تعجب کنید که چرا باید دید یک عنصر را پس از پیمایش بررسی کرد. دلایل متعددی برای این امر وجود دارد. تصور کنید ممکن است بخواهید در حین پیمایش کاربر محتوا را به صورت پویا بارگیری کنید، تکنیکی رایج در پیاده سازی اسکرول بی نهایت. یا شاید بخواهید وقتی عنصر خاصی در معرض دید قرار می‌گیرد، انیمیشن یا رویدادی را فعال کنید. متوجه خواهید شد که بررسی قابلیت مشاهده عنصر می تواند برای ردیابی رفتار کاربر و تعامل با سایت شما نیز مفید باشد.
بررسی نمایان بودن عنصر در جاوا اسکریپت ساده
حالا بریم سر کد. در اینجا روش مشاهده یک عنصر با استفاده از جاوا اسکریپت ساده آمده است:
function isElementVisible(el) {
const rect = el.getBoundingClientRect();
const vWidth = window.innerWidth || doc.documentElement.clientWidth;
const vHeight = window.innerHeight || doc.documentElement.clientHeight;
// Check if the element is out of bounds
if (rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight) return false;
// Return true if any of the above disjunctions are false
return true;
}
// Usage
const myElement = document.querySelector('#myElement');
console.log(isElementVisible(myElement)); // Outputs: true or false
در این کد ابتدا مستطیل مرزی عنصر را با استفاده از عبارت دریافت می کنیم getBoundingClientRect() روش. این به ما یک شی با ویژگی ها می دهد top، right، bottom، و left، که مختصات لبه های عنصر را نسبت به viewport نشان می دهد.
سپس این مختصات را با ابعاد ویوپورت مقایسه می کنیم که از آنها استفاده می کنیم window.innerWidth، window.innerHeight، یا عقب ماندگی های آنها. اگر مختصات عنصر خارج از ابعاد viewport باشد، می دانیم که عنصر قابل مشاهده نیست و برمی گردد false. در غیر این صورت برمی گردیم true.
این تابع را می توان با هر عنصری در DOM استفاده کرد و به شما می گوید که آیا آن عنصر در حال حاضر در viewport قابل مشاهده است یا خیر.
بررسی قابلیت مشاهده عنصر با jQuery
jQuery، همانطور که احتمالا می دانید، یک کتابخانه جاوا اسکریپت سریع، کوچک و بسیار محبوب است. با استفاده از API آسان که در اکثر مرورگرها کار می کند، مواردی مانند پیمایش و دستکاری اسناد HTML، مدیریت رویداد و انیمیشن را بسیار آسان تر می کند.
برای بررسی اینکه آیا یک عنصر پس از اسکرول قابل مشاهده است یا خیر، جی کوئری روشی به نام ارائه می دهد :visible انتخابگر با این حال، این روش به تنهایی نمی تواند تشخیص دهد که آیا عنصر واقعاً در داخل است یا خیر درگاه دید پس از پیمایش.
برای انجام آنچه می خواهیم، می توانیم یک تابع سفارشی ایجاد کنیم.
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
برای استفاده از این تابع، به سادگی آن را فراخوانی کنید روی هر شی jQuery مانند این:
$(window).روی('resize scroll', function() {
if ($('#myElement').isInViewport()) {
console.log('#myElement is visible');
} else {
console.log('#myElement is not visible');
}
});
اسکرول شنونده رویداد در جاوا اسکریپت
جاوا اسکریپت فراهم می کند scroll رویداد برای تشخیص زمانی که موقعیت اسکرول یک عنصر تغییر کرده است. را scroll رویداد زمانی فعال می شود که نمای سند یا یک عنصر پیمایش شده باشد.
در اینجا روش تنظیم یک شنونده رویداد اسکرول آمده است روی شی پنجره:
window.addEventListener('scroll', function() {
console.log('Scrolled!');
});
توجه داشته باشید: را scroll رویداد برای هر عنصر قابل پیمایش و شی پنجره اجرا می شود. با این حال، برای عناصری که نوار اسکرول ندارند فعال نمی شود.
این مفید است زیرا ما می‌توانیم بررسی کنیم که آیا عنصر هدف ما در ویوپورت است یا نه، اما فقط پس از یک رویداد اسکرول.
شنونده رویداد را در جی کوئری اسکرول کنید
در jQuery، ما می‌توانیم یک شنونده رویداد پیمایشی را با استفاده از .scroll() روش. یک تابع کنترل کننده رویداد را به آن متصل می کند scroll رویداد، یا باعث آن رویداد می شود روی یک عنصر
در اینجا روش تنظیم یک شنونده رویداد اسکرول آمده است روی شی پنجره با استفاده از jQuery:
$(window).scroll(function() {
console.log('Scrolled!');
});
با این کار “Scrolled!” به console هر بار که پنجره پیمایش می شود.
باز هم، این پاسخ تماس رویداد برای ما مفید است تا بفهمیم آیا عنصری در معرض دید است یا نه، زیرا به ما اجازه می‌دهد فقط زمانی که کاربر پیمایش می‌کند، بررسی کنیم، برخلاف تنظیم نوعی تایمر برای بررسی دوره‌ای.
نتیجه
در این بایت، ما یاد گرفتیم که چگونه با استفاده از جاوا اسکریپت ساده و جی کوئری بررسی کنیم که آیا یک عنصر پس از پیمایش قابل مشاهده است یا خیر. همچنین روش تنظیم شنوندگان رویداد اسکرول را در جاوا اسکریپت و جی کوئری بررسی کردیم. در حالی که jQuery یک نحو مختصرتر و آسان برای استفاده را ارائه می دهد، همیشه خوب است بدانید که چگونه می توان به همان نتیجه در جاوا اسکریپت خالص دست یافت.
(برچسب ها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1402-12-30 21:37:06
