السلام عليكم،
سنُبحر اليوم في أطول موقع في العالم
scrollTo
يُمكنك استخدام التابع scrollTo للذهاب إلى اي مكان في الصفحة وذلك بتحديد الوسيطين xوy على الترتيب (مقدّرة بالبكسل)، حيث يتم عمل scroll إلى الموضع الذي قمت بتحديده
scrollTo(0,100);
سيؤدي السطر السابق إلى نزولك 100 بكسل للأسفل ملاحظة: الوسائط التي تُعطي للتابع scrollTo تحدد الموضع المطلق (absolute)
scrollBy
ينقلك هذا التابع نسبيًّا في الصفحة حسب الوسيطين المعطيين، فمثلًا
scrollBy(0,100);
سيؤدي إلى نزولك 100 بكسل كلما قمت باستدعائه، سنضيف حركة بسيطة إلى هذا التابع، حيث سنقوم باستدعائه كلما تم النقر على زر الفأرة، وذلك باستخدام تابع الاستدعاء الخلفي(call Back function) المسمى onmousedown
window.onmousedown=function(){scrollBy(0,100);}
أو يمكننا عمل تسجيل التابع بالطريقة التالية
window.addEventListener("mousedown", function(){scrollBy(0,100);});
السطران السابقان سيسبّبان قمة الإزعاج أثناء التنقل في الصفحة، فكلما أردت النقر على زر ما، ستنزل الصفحة 100 بكسل للأسفل!
pageXOffset و pageYOffset
يمكنك معرفة المقدار الذي تم نزله حتى الآن عن طريق المتغيرين pageXOffset , pageYOffset
ومن خلالهما يمكننا عمل الخدعة التالية: سننزل في أطول صفحة بالعالم بشكل متسارع، وكلما ازداد ابتعادنا عن بداية الصفحة سيزداد تسارعنا إلى ان نصل إلى أسفل الصفحة
setInterval(function(){scrollBy(0,10+pageYOffset*0.01);},10);
ملاحظة: يمكنك استخدام document.body.scrollLeft و document.body.scrollTop لتحديد الموضع الحالي للتمرير، كما يمكنك استخدام الاسمين المستعارين scrollX و scrollY بدلًا من pageXOffset و pageYOffset
المتغيران document.body.scroll
ستعطيك المتغيرات التالية المرونة التي تلزمك للإبحار في الصفحات، وللتحقق من وصولك إلى المكان الذي تريده
document.body.scrollHeight document.body.scrollWidth
يعطي المتغيران السابقان ارتفاع الصفحة الحالية وعرضها، والآن بإمكاننا الانتقال إلى أسفل الصفحة بحركة صغيرة:
window.scrollTo(0,document.body.scrollHeight);
ختامًا، ما رأيك لو تجرب الشيفرة التالية :)
setInterval(function(){window.scrollTo(0,document.body.scrollHeight*Math.random());},5);
المصادر
/
http://www.alecjacobson.com...المراجع
http://www.w3schools.com/js... http://www.w3schools.com/js... http://www.w3schools.com/js...والله ولي التوفيق