چگونه با جاوا اسکریپت موقعیت اسکرول صفحه وب فعلی را دریافت و تنظیم کنیم؟

چگونه با جاوا اسکریپت موقعیت اسکرول صفحه وب فعلی را دریافت و تنظیم کنیم؟

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

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

می توانیم از document.documentElement.scrollTop یا document.body.scrollTop برای بدست آوردن موقعیت اسکرول صفحه استفاده کنیم.

به عنوان مثال می توانیم بنویسیم:

const div = document.querySelector('div')
for (let i = 0; i < 100; i++) {
  const p = document.createElement('p')
  p.textContent = i
  document.body.appendChild(p)
}window.addEventListener('scroll', () => {
  console.log(document.documentElement.scrollTop, document.body.scrollTop)
});

انجام پروژه در فریلنس پروژه

برای افزودن عناصر به یک div و گوش دادن به رویداد اسکرول در پنجره.

در شنونده رویداد، ویژگی document.documentElement.scrollTop را ثبت می کنیم که باید موقعیت اسکرول صفحه را ثبت کند.

همانطور که به سمت بالا یا پایین حرکت می کنیم، مقدار document.documentElement.scrollTop باید تغییر کند.
موقعیت فعلی پیمایش صفحه وب را تنظیم کنید

همچنین می توانیم ویژگی document.documentElement.scrollTop را در موقعیت اسکرول مورد نظر خود قرار دهیم.

موقعیت باید یک عدد بر حسب پیکسل باشد.

به عنوان مثال می توانیم بنویسیم:

const div = document.querySelector('div')
for (let i = 0; i < 100; i++) {
  const p = document.createElement('p')
  p.textContent = i
  document.body.appendChild(p)
}document.documentElement.scrollTop = document.body.scrollTop = 300;

برای تنظیم document.documentElement.scrollTop و ویژگی document.body.scrollTop روی 300 پیکسل پایین صفحه.

اکنون باید ببینیم که صفحه 300 پیکسل به پایین اسکرول شده است.

می‌توانیم موقعیت اسکرول یک صفحه را با ویژگی document.documentElement.scrollTop دریافت و تنظیم کنیم.