برنامه نویسی 328 بازدید

شاید تاکنون مواردی بوده باشد که در پروژه‌های خود نیاز داشته‌اید یک قابلیت اسکرول به بالا را پیاده‌سازی کنید. انجام این کار با استفاده از کد جاوا اسکریپت کار چندان دشواری نیست، اما زمانی که بخواهیم آن را در یک اپلیکیشن ری‌اکت پیاده‌سازی کنیم، باید مسئله نمایانی فلش در حالت کامپوننت والد را مدیریت کنیم. در این مقاله با روش ساخت یک فلش اسکرول به بالا با قلاب‌های React آشنا خواهیم شد.

چالش اصلی این کار آن است که وقتی می‌خواهیم صرفاً نمایانی یا پنهان شدن فلش را به‌روزرسانی کنیم، حالت کل کامپوننت والد تغییر یافته و رندرِ مجدد می‌شود. ما باید مقادیر خاصی به کامپوننت فلش بدهیم و به این ترتیب نمایانی آن را فعال یا غیرفعال کنیم. به این منظور می‌توانیم با استفاده از قلاب‌های React یک کامپوننت تابعی به نام ScrollTopArrow با کمترین کد ایجاد کنیم و حالت را داخل آن مدیریت کرده و از اثرات جانبی جلوگیری کنیم. نمایانی می‌تواند با افزودن یک شنونده رویداد اسکرول و پیاده‌سازی useState مدیریت شود. به کد زیر توجه کنید:

با این که روش دست‌کاری سنتی DOM در ری‌اکت یک رویه ضدِّ الگو محسوب می‌شود، اما در این مورد برای چنین کاربردی توجیه منطقی داریم، زیرا از این دست‌کاری سنتی DOM برای تغییر داده‌ها یا تغییر حالت به روش مستقیم استفاده نمی‌کنیم. تنها کاری که انجام می‌دهیم، افزودن یک شنونده برای مشخص ساختن این نکته است که عنصر باید نمایش یابد یا نه است. همچنین از دست‌کاری DOM برای تغییر کلاس یا استایل عنصر نیز استفاده نمی‌کنیم.

اکنون که منطق فعال/غیرفعال کردن نمایانی را در اختیار داریم، می‌توانیم شروع به ساخت عملی کامپوننت خود بکنیم و استایل‌ها را اعمال بکنیم. اگر می‌خواهید عنصر فلش خود را با استفاده از HTML و CSS بسازید، هیچ مشکلی وجود ندارد. اما اگر کمی تنبل هستید، می‌توانید یک آیکون را از react-icons (+) ایمپورت کنید:

همه موارد مرتبط با استایل آیکون به جز نمایش یا عدم نمایش آن در App.css قرار دارند. این بخش اخیر نیز از روی مشخصه حالت قلاب showScroll مشخص می‌شود. اگر showScroll مقدار true داشته باشد، فلش نمایش می‌یابد و اگر false باشد، پنهان می‌شود.

در نهایت کد مربوط به تابع scrollTop به صورت زیر است:

ما می‌توانیم از تابع scrollTo استفاده کنیم که در اینترفیس window، نیتیو محسوب می‌شود و پارامترهای top و behavior را ارسال کنیم. مقدار top برابر با صفر است، زیرا می‌خواهیم اسکرول، ما را به ابتدای صفحه ببرد. در مورد behavior نیز ترجیح می‌دهیم از behavior استفاده کنیم، زیرا گذار جلوه اسکرول را ملایم‌تر می‌سازد. در ادامه کد کامل کامپوننت smooth را همراه با App.css می‌بینید:

  • فایل App.css
  • فایل ScrollArrow.js
اکنون تنها کاری که باید بکنیم این است که ScrollTopArrow را در یک کامپوننت ایمپورت کنیم. ما برای تست کردن آن را در کامپوننت App ایمپورت کرده و ارتفاع کامپوننت را روی 5000 پیکسل تنظیم کردیم. محصول نهایی به صورت زیر است:

قابلیت اسکرول به بالا

سورس کد کامل پروژه را می‌توانید در این ریپوی گیت‌هاب (+) ملاحظه کنید.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

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

آیا این مطلب برای شما مفید بود؟

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *