هل يمكن التحكم بالscroll-bar لdiv ما بواسطة الjavascript ؟

يمكنك أيضا عمل ذلك عن طريق الروابط التشعبية بإستعمال 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;
} 

مثال حي :