اي عندما اضغط على زر معين في كل مرة تتحرك السكرول بار نزولاً او صعوداً بنسبة معينة .
هل يمكن التحكم بالscroll-bar لdiv ما بواسطة الjavascript ؟
يمكن استخدام جيكويري مع دالة
animate
وخاصية
scrollTop
لعمل إنزلاق مثلاً نحو الأسفل، ويمكنك تحديد القيمة لكل نقرة
لنفرض لديك وسم div مع زر كالتالي:
<div class="my-div"> <button type="button">Click Me!</button> </div>
و css
.my-div{ width: 100%; height: 1000px; background: #ccc; }
وجافاسكربت:
$("button").click(function() { $('html,body').animate({ scrollTop: $(".my-div").offset().top (+- x) },'slow'); ^^^^^^ });
لاحظ أنه يمكنك وضع مكان X
(+- x)
ماتريد أو حتى حذفها، يمكنك التجريب كما تشاء
جيكويري مكتبة سهلة و غنية بالدوال وتسهل العمل، أي أقترح عليك تعلمها واستخدامها..
تضمين جيكويري يتم بسطر واحد، ثم استخدمها ضمن script مثل باقي أكواد js
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head>
كم احتاج لتعلمها ؟
هل عملها هو تسهيل كتابة اكواد الجافا سكربت ام انها تحتوي على دوال جاهزة وفقط يجب استدعائها والعمل بها حتى وان لم تكن تعرف كيف تم انشائها؟
يمكنك أيضا عمل ذلك عن طريق الروابط التشعبية بإستعمال HTML فقط ،
لنقل أن لدينا قائمة تصفح كالتالي :
- item1
- item2
- item3
و ثلاثة حاويات .
نريد عند الضغط على كل عنصر من القائمة ، الذهاب إلى الحاوي المرافق له .
مثال : عند الضغط على item1 يتم التوجه بنا إلى الحاوي المرافق للعنصر item1 .
لعمل ذلك نحتاج القيام بالتالي :
=> تعريف الهيكلية HTML بحيث أننا نتأكد من إنشاء كل من :
- قائمة تصفح تحمل كامل العناصر المراد الإنزلاق لها . يجب تعريف خاصية href في كل وسم رابط تشعبي يحوي العلامة # مرفقة بالمعرف id للعنصر المرافق .
- حاو لمجموعة الحاويات أو العناصر المراد الإنزلاق لها . بحيث يتم تعريف خاصية id لكل منها .
<ul> <li> <a href="#item1"> item1 </a> </li> <li> <a href="#item2"> item2 </a> </li> <li> <a href="#item3"> item3 </a></li> <li> <a href="#item4"> item4 </a> </li> <li> <a href="#item5"> item5 </a> </li> <li> <a href="#item6"> item6 </a> </li> <li> <a href="#item7"> item7 </a> </li> <li> <a href="#item8"> item8 </a> </li> <li> <a href="#item9"> item9 </a> </li> </ul> <div class="myDiv"> <div class="itemsContainer"> <div id="item1"> i'm item1 </div> <div id="item2"> i'm item2 </div> <div id="item3"> i'm item3 </div> <div id="item4"> i'm item4 </div> <div id="item5"> i'm item5 </div> <div id="item6"> i'm item6 </div> <div id="item7"> i'm item7 </div> <div id="item8"> i'm item8 </div> <div id="item9"> i'm item9 </div> </div> </div>
إضافة بعض الـ css لتحديد إرتفاع العنصر myDiv :
.myDiv{ height:230px; overflow-y:scroll; } .myDiv .itemsContainer div{ padding: 15px 5px; text-align:center; border: 1px solid rgb(0,0,0); margin: 5px 0px; }
يفترض بهذا أن يعمل بشكل صحيح ، كما يمكنك بكل حال من الأحوال إضافة بعض المرونة عن طريق تحديد سلوك الإنزلاق :
html ,.myDiv{ scroll-behavior: smooth; }
مثال حي :
التعليقات