رفع مشکل عدم اسکرول شدن لیست دراپ‌دان در موبایل

گاهی اوقات پیش می‌آید که لیست‌های دراپ‌دان در دستگاه‌های موبایل به‌درستی قابل اسکرول کردن نیستند. این مشکل می‌تواند در تجربه کاربری تأثیر منفی داشته باشد و باعث شود کاربران به راحتی نتوانند به تمام آیتم‌های موجود در لیست دسترسی پیدا کنند. خوشبختانه، روش‌هایی وجود دارد که می‌توان با استفاده از CSS و جاوااسکریپت این مشکل را برطرف کرد. در این مقاله، به بررسی چگونگی حل این مشکل می‌پردازیم.

اول از همه، باید اطمینان حاصل کنیم که تنظیمات CSS صحیحی برای فهرست دراپ‌دان تعریف شده است. معمولاً استفاده از ویژگی overflow: auto; و max-height می‌تواند به حل مشکل کمک کند. این ویژگی‌ها باید بر روی عنصری که لیست آیتم‌ها در آن قرار داده شده، اعمال شوند.

علاوه بر تنظیمات CSS، گاهی اوقات نیاز است از جاوااسکریپت نیز استفاده کنیم تا به صورت پویا اندازه لیست را متناسب با صفحه نمایش کاربر تنظیم کنیم. این کار باعث می‌شود که لیست دراپ‌دان بر روی همه دستگاه‌ها به درستی عمل کند و قابل اسکرول باشد.

برای شروع، بیایید نگاهی به یک نمونه ساده از کد CSS و HTML برای تعریف یک لیست دراپ‌دان بیندازیم. در این نمونه، تمرکز ما بر روی افزودن اسکرول به لیست در موبایل است. در ادامه، با استفاده از جاوااسکریپت، بعضی از پارامترها را بررسی می‌کنیم تا مطمئن شویم لیست در شرایط مختلف پاسخگو (responsive) است.

به خاطر داشته باشید که این کد باید برای مرورگرها و دستگاه‌های مختلف تست شود تا از صحت عملکرد آن با علم به تنوع در رفتار مرورگرها و دستگاه‌ها اطمینان حاصل شود.

<style>
  .dropdown {
    position: relative;
    display: inline-block;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }
</style>

<div class="dropdown">
  <button>دراپ‌دان</button>
  <div class="dropdown-content">
    <a href="#">آیتم 1</a>
    <a href="#">آیتم 2</a>
    <a href="#">آیتم 3</a>
    <a href="#">آیتم 4</a>
    <a href="#">آیتم 5</a>
  </div>
</div>
<script>
  // استفاده از جاوااسکریپت برای اطمینان از پاسخگویی در حرکت صفحه
  document.querySelectorAll('.dropdown').forEach(function(dropDownWrapper) {
    dropDownWrapper.addEventListener('touchstart', function() {
      this.querySelector('.dropdown-content').style.display = 'block';
    });
    dropDownWrapper.addEventListener('touchend', function() {
      this.querySelector('.dropdown-content').style.display = 'none';
    });
  });
</script>

در اینجا آنچه کد انجام می‌دهد را توضیح می‌دهیم: