ویژگی scrollX Window

تعریف و استفاده

scrollX ویژگی بازگشتی پیکسل‌هایی است که از بالا چپ صفحه به پایین و راست حرکت می‌کنند.

scrollX ویژگی فقط خواندنی است.

نشان‌دهنده

scrollX ویژگی برابر با ویژگی pageXOffset استفاده کنید.

برای سازگاری بین مرورگرها، از ویژگی window.pageXOffset به جای window.scrollX.

لطفاً ببینید:

ویژگی pageXOffset

ویژگی pageYOffset

مثال

مثال 1

محتوای 100 پیکسل را به پایین و به سمت راست رول کنید و scrollX و scrollY را نشان دهید:

window.scrollBy(100, 100);
alert(window.scrollX + window.scrollY);

شما خودتان امتحان کنید

مثال 2

ایجاد ناوبری چسبنده:

// ناوبری را بدست آورید
const navbar = document.getElementById("navbar");
// موقعیت رول کردن ناوبری را بدست آورید
const sticky = navbar.offsetTop;
// وقتی به موقعیت رول کردن خود برسید، نوع sticky را به ناوبری اضافه کنید. وقتی از موقعیت رول کردن خارج می‌شوید، نوع sticky را حذف کنید.
function myFunction() {
  اگر (window.scrollY >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

شما خودتان امتحان کنید

قانون

window.scrollX

یا:

scrollX

مقدار بازگشتی

نوع توضیح
عدد عدد پیکسل‌هایی که از بالا چپ صفحه به پایین و راست حرکت می‌کنند.

پشتیبانی مرورگر

همه مرورگرها پشتیبانی می‌کنند window.scrollX:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
پشتیبانی 9-11 پشتیبانی پشتیبانی پشتیبانی پشتیبانی