این آموزش در تاریخ ۱۴۰۰/۰۷/۲۷ آپدیت شده است.
آموزش ویژگی pageYOffset در BOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی pageYOffset در BOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی pageYOffset در BOM جاوااسکریپت
با استفاده از ویژگی window.pageYOffset میتونیم میزان اسکرولی که بصورت عمودی در پنجره مرورگر انجام شده رو بدست آوریم و همچنین با استفاده از ویژگی window.pageXOffset میتونیم میزان اسکرولی که بصورت افقی انجام شده رو بدست آوریم.
| مقدار برگشتی | برگشت یک عدد که نشان دهنده میزان اسکرول بصورت عمودی می باشد * مقدار برگشتی برحسب پیکسل ( PX ) می باشد |
|---|
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : استفاده از pageXOffset ( میزان اسکرولی که از سمت چپ به راست انجام شده ) و pageYOffset ( میزان اسکرولی که از سمت بالا به پایین انجام شده )
|
1 2 3 4 5 6 7 8 9 |
<script> function get(){ var x = window.pageXOffset; var y = window.pageYOffset; alert( "XOffset = " + x + " " + "YOffset = " + y); } </script> |
مثال شماره ۲ : ساخت دکمه برو بالای صفحه ( با اسکرول نرم )
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> function Go_Up(){ var Btn_Up = document.getElementById("MyButton"); if( window.pageYOffset > 60 ){ Btn_Up.classList.add("show") }else{ Btn_Up.classList.remove("show"); } } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| pageYOffset | بله | بله | بله | بله | ۹ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
|
1 |
window.pageYOffset; |
Free-Learn
نکات و توضیحات
- این ویژگی یک ویژگی فقط خواندنی یا Read-Only می باشد.
- ویژگی pageXOffset میزان اسکرولی که از سمت چپ به راست ( بصورت افقی ) انجام شده رو برمیگردونه.
- ویژگی pageYOffset میزان اسکرولی که از سمت بالا به پایین ( بصورت عمودی ) انجام شده رو برمیگردونه.
- اگه جهت صفحه راست به چپ ( راست چین ) باشه مقدار pageXOffset میشه از سمت راست به چپ و بصورت منفی برمیگردونه. ( مثال )
Free-Learn
مثال های بیشتر
مثال شماره ۱ : ایجاد منوی چسبون ( یعنی وقتی کمی اسکرول میکنیم بسمت پایین منو فیکس میشه و میچسبه به سقف مرورگر )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> var navbar = document.getElementById("navbar"); var sticky = navbar.offsetTop; function mysticky(){ if( window.pageYOffset >= sticky ){ navbar.classList.add("sticky") }else{ navbar.classList.remove("sticky"); } } </script> |
