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

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

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

1const [showScroll, setShowScroll] = useState(false)
2const checkScrollTop = () => {    
3   if (!showScroll && window.pageYOffset > 400){
4      setShowScroll(true)    
5   } else if (showScroll && window.pageYOffset <= 400){
6      setShowScroll(false)    
7   }  
8};
9window.addEventListener('scroll', checkScrollTop)

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

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در فرادرس

کلیک کنید

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

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

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

1<FaArrowCircleUp 
2   className="scrollTop" 
3   onClick={scrollTop} 
4   style={{height: 40, display: showScroll ? 'flex' : 'none'}}
5/>

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

1const scrollTop = () =>{
2   window.scrollTo({top: 0, behavior: 'smooth'});
3};

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

• فایل App.css

1App {
2  text-align: center;
3  height: 5000px;
4}
5
6.scrollTop {
7  position: fixed; 
8  width: 100%;
9  bottom: 20px;
10  align-items: center;
11  height: 20px;
12  justify-content: center;
13  z-index: 1000;
14  cursor: pointer;
15  animation: fadeIn 0.3s;
16  transition: opacity 0.4s;
17  opacity: 0.5;
18}
19
20.scrollTop:hover{
21  opacity: 1;
22}
23
24@keyframes fadeIn {
25  0% {
26    opacity: 0;
27  }
28  100% {
29    opacity: 0.5;
30  }
31}

• فایل ScrollArrow.js

1import React, {useState} from 'react';
2import {FaArrowCircleUp} from 'react-icons/fa';
3import '../App.css';
4
5
6const ScrollArrow = () =>{
7
8  const [showScroll, setShowScroll] = useState(false)
9
10  const checkScrollTop = () => {
11    if (!showScroll && window.pageYOffset > 400){
12      setShowScroll(true)
13    } else if (showScroll && window.pageYOffset <= 400){
14      setShowScroll(false)
15    }
16  };
17
18  const scrollTop = () =>{
19    window.scrollTo({top: 0, behavior: 'smooth'});
20  };
21
22  window.addEventListener('scroll', checkScrollTop)
23
24  return (
25        <FaArrowCircleUp className="scrollTop" onClick={scrollTop} style={{height: 40, display: showScroll ? 'flex' : 'none'}}/>
26  );
27}
28
29export default ScrollArrow;

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

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

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

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

==