مرورگر - چگونه میتوانم موقعیت نوار پیمایش را با استفاده از جاوااسکریپت دریافت کنم؟

من دارم سعی میکنم موقعیت نوار پیمایش مرورگر را با جاوااسکریپت تشخیص دهم تا تصمیم بگیرم نمای فعلی در صفحه کجاست.

حدس من این است که باید محل شست روی نوار را تشخیص دهم و سپس ارتفاع شست را به عنوان درصدی از ارتفاع کل نوار مشخص کنم. آیا دارم بیش از حد پیچیدهاش میکنم، یا جاوااسکریپت راه حل آسانتری ارائه میدهد؟ کد نمونه چگونه خواهد بود؟

پاسخ شماره ۱

شما میتوانید از element.scrollTop و element.scrollLeft برای بهدست آوردن مقدار جابهجایی عمودی و افقی که پیمایش شده است، بهترتیب، استفاده کنید. element میتواند document.body باشد اگر به کل صفحه اهمیت میدهید. شما میتوانید آن را با element.offsetHeight و element.offsetWidth مقایسه کنید (دوباره، element ممکن است body باشد) اگر نیاز به درصدها دارید.

پاسخ شماره ۲

من این کار را برای یک <div> در کروم انجام دادم.

element.scrollTop - پیکسلهایی که به دلیل اسکرول در بالا پنهان شدهاند. بدون اسکرول مقدار آن 0 است.

element.scrollHeight - پیکسلهای کل div است.

element.clientHeight - تعداد پیکسلهایی است که در مرورگر خود مشاهده میکنید.

var a = element.scrollTop;

خواهد بود موقعیت.

var b = element.scrollHeight - element.clientHeight;

بیشترین مقدار برای scrollTop خواهد بود.

var c = a / b;

درصد اسکرول خواهد بود [از ۰ تا ۱].

پاسخ شماره ۳

اینطوریه :)

window.addEventListener("scroll", (event) => {
    let scroll = this.scrollY;
    console.log(scroll)
});

پاسخ شماره ۴

document.getScroll = function() {
    if (window.pageYOffset != undefined) {
        return [pageXOffset, pageYOffset];
    } else {
        var sx, sy, d = document,
            r = d.documentElement,
            b = d.body;
        sx = r.scrollLeft || b.scrollLeft || 0;
        sy = r.scrollTop || b.scrollTop || 0;
        return [sx, sy];
    }
}

یک آرایه با دو عدد صحیح برمیگرداند - [scrollLeft, scrollTop]

پاسخ شماره ۵

پاسخ برای ۲۰۱۸:

بهترین راه برای انجام کارهایی از این قبیل استفاده از API مشاهدهگر تقاطع است.

رابط برنامهنویسی Intersection Observer راهی برای مشاهده تغییرات بهصورت ناهمزمان در تلاقی یک عنصر هدف با یک عنصر بالاسری یا با نماگاه سند سطح بالا فراهم میکند.

به طور تاریخی، تشخیص قابل مشاهده بودن یک عنصر، یا قابل مشاهده بودن نسبی دو عنصر نسبت به یکدیگر، کار دشواری بوده است که راه حلهای آن غیرقابل اعتماد بوده و باعث کند شدن مرورگر و سایتهایی میشده که کاربر به آنها دسترسی دارد. متأسفانه، با رشد وب، نیاز به این نوع اطلاعات افزایش یافته است. اطلاعات تقاطع به دلایل زیادی لازم است، مانند:

• بارگذاری تنبل تصاویر یا محتوای دیگر در هنگامی که صفحه پیمایش میشود.
• پیادهسازی وبسایتهای «اسکرول بینهایت»، جایی که با اسکرول کردن، محتوای بیشتری بارگیری و نمایش داده میشود، به طوری که کاربر نیازی به مرور صفحات نداشته باشد.
• گزارشدهی به منظور مشاهده تبلیغات برای محاسبه درآمدهای تبلیغاتی.
• تصمیمگیری در مورد انجام دادن یا ندادن وظایف یا فرآیندهای انیمیشن بر اساس اینکه آیا کاربر نتیجه را خواهد دید یا نه.

پیادهسازی تشخیص تقاطع در گذشته شامل هندلرهای رویداد و حلقههایی بود که متدهایی مانند Element.getBoundingClientRect() را فراخوانی میکردند تا اطلاعات لازم برای هر عنصر تحت تأثیر را جمعآوری کنند. از آنجا که تمام این کد روی نخ اصلی اجرا میشود، حتی یکی از این کدها میتواند باعث مشکلات عملکردی شود. وقتی سایتی با این تستها بارگذاری میشود، اوضاع میتواند کاملاً بد شود.

کد نمونه زیر را ببینید:

var options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

var target = document.querySelector('#listItem');
observer.observe(target);

بیشتر مرورگرهای مدرن از IntersectionObserver پشتیبانی میکنند، اما شما باید برای سازگاری با نسخههای قدیمیتر از polyfill استفاده کنید.

پاسخ شماره ۶

اگر کل صفحه برایتان مهم است، میتوانید از این استفاده کنید:

document.body.getBoundingClientRect().top

پاسخ شماره ۷

قطعات کوتاه

خصوصیت فقط-خواندنی scrollY از رابط Window تعداد پیکسلهایی که سند در حال حاضر به صورت عمودی پیمایش شده است را برمیگرداند.

window.addEventListener('scroll', function(){console.log(this.scrollY)})

html{height:5000px}

نسخه کوتاهتر با استفاده از تابع فلش ناشناس (ES6) و اجتناب از استفاده از this

window.addEventListener('scroll', () => console.log(scrollY))

html{height:5000px}