ساخت قابلیت اسکرول به بالا با قلاب های React – به زبان ساده

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

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

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

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

import {FaArrowCircleUp} from 'react-icons/fa';

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

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

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

• فایل App.css

• فایل ScrollArrow.js

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

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

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

• مجموعه آموزش‌‌های جاوا اسکریپت
• مجموعه آموزش‌های برنامه‌‌نویسی
• ری اکت (React) — راهنمای جامع برای شروع به کار
• آموزش ری اکت (React) — مجموعه مقالات مجله فرادرس
• احراز هویت مبتنی بر نقش با روتر ری اکت و تایپ اسکریپت — راهنمای کاربردی

==