Scrolling
في هذا الدرس سوف نتعرف علي ال scrolling وهو الخاص بتحريك المحتوي المعروض من صفحة الويب web page
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
Scrolling
</> Scrolling
تستخدم دالة ال ( ) scroll في تمرير ال events لأعلي او لأسفل ويمكننا ايضا تنفيذ دالة معينة في حالة حدوث هذا التمرير
Syntax
$(selector).scroll()
Syntax
scroll + function
$(selector).scroll(function)
في هذا المثال قمنا باستخدام دالة ال scroll لعمل تمرير لأعلي ولأسفل وقمنا بأنشاء العنصر p ليتم تنفيذ التمرير عليه ثم قمنا بربطها بدالة اخري تقوم بتغيير لون الخلفية الخاص بالعنصر P عند حدوث التمرير تقوم الدالة بالتنفيذ
Example
<h1> Hello world :):) </h1>
<h2> Scroll the bordered text to see the effect. </h2>
<p> This is an example of using the <b> scroll() </b> method. </p>
<p id = "para"> Hi, Welcome to the closetag.com. This site is developed so that students may learn computer science related technologies easily. The closetag.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better. </p>
<script>
$(document).ready(function(){
$("#para").scroll(function(){
$("#para").css("color", "red");
$("#para").css("background", "lightgreen");
});
});
</> scrollTop ( )
تستخدم الدالة ( ) scrollTop لعملتين اساسيتين وهما : -
- return position : وفي هذه الحالة تقوم الدالة بتحديد موضع وقوف شريط التمرير وأرجاع هذه القيمة الينا
- set Position : تقوم في هذه الحالة بتعيين موضع شريط التمرير لكل العناصر المرتبطة بها
Syntax
$(selector).scrollTop()
Example
$(document).ready(function(){
$("button").click(function(){
alert($("div").scrollTop() + " px");
});
});
</> scrollLeft ( )
تستخدم الدالة ( ) scrollTop لعملتين اساسيتين وهما : -
- return position : وفي هذه الحالة تقوم الدالة بتحديد موضع وقوف شريط التمرير وأرجاع هذه القيمة الينا
- set Position : تقوم في هذه الحالة بتعيين موضع شريط التمرير لكل العناصر المرتبطة بها
تستخدم scrollLeft في تعيين قيمة موضع الشريط من الناحية الافقية
$(selector).scrollLeft(position)
في المثال التالي تم استخدام دالة ال ( ) scrollLeft للحصول علي القيمة الافقية لشريط التمرير بوحدة البيكسل PX
Example
<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("div").scrollLeft() + " px");
});
});
</script>
<style>
div{
border: 2px solid black;
width: 100px;
height: 200px;
overflow: auto;
}
</style>
</head>
<body>
<h3> It is an example of using the scrollLeft() method. </h3>
<p> Move the scrollbar left and click the button again. </p>
<div>
Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii, Welcome to the closetag.com. This site is developed so that students may learn computer science related technologies easily. The closetag.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</div>
</br>
<button> Return the horizontal position of the scrollbar </button>
</body>
</html>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعلم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة. نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي، لذا فإننا نركز على التعلم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن. هذه الخبرة ننقلها لك تحت إشراف مهندسين العباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
