پیاده‌سازی اسکرول کردن نرم در React

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

با این وجود حتی با این که اسکرول کردن نرم شاید نامحسوس باشد، این که آن را خودتان پیاده‌سازی کنید کمی پیچیده است. به همین علت، در این مقاله از پکیج react-scroll بر روی NPM استفاده خواهیم کرد.

1. استفاده از react-scroll
2. شروع کار
3. نصب و پیکربندی React-Scroll
4. استایل‌بندی لینک‌های فعال
5. توابع اضافی
6. خلاصه

استفاده از react-scroll

در این آموزش ما در حال ساخت یک برنامه ساده هستیم، اما اگر می‌خواهید ببینید که react-scroll چگونه کار می‌کند:

react-scroll را نصب کنید:

npm i -S react-scroll

پکیج react-scroll را وارد کنید:

import { Link, animateScroll as scroll } from "react-scroll";

کامپوننت Link را اضافه کنید:

کامپوننت <Link /> به یک نقطه خاص از برنامه شما اشاره خواهد کرد.

<Link to="section1">

بیایید کمی عمیق‌تر وارد شویم و یک برنامه React با اسکرول کردن نرم بسازیم.

شروع کار

در جهت راحتی، من یک پروژه React (با استفاده از Create React App نسخه ۲) برای شروع ساخته‌ام که یک نوار جهت‌یابی در بالا به همراه ۵ بخش مختلف در محتویات دارد. در اینجا، لینک‌های موجود در نوار بالا فقط تگ‌های anchor هستند، اما به زودی آن‌ها را بروزرسانی خواهیم کرد تا اسکرول کردن نرم‌ را ممکن کنیم. شما می‌توانید این پروژه را در این لینک پیدا کنید. دقت کنید که این لینک برای شاخه «شروع» است. لینک اصلی شامل تمام تغییرات اعمال شده می‌باشد.

برای کپی کردن پروژه، می‌توانید از این دستور استفاده کنید:

git clone https://github.com/jamesqquick/React-With-Smooth-Scrolling.git

اگر به شاخه Src->Components نگاه کنید، یک فایل به نام Navbar.js خواهید یافت که شامل نوار جهت‌یابی و عناصر متناظر آن می‌باشد.

سپس، اگر فایل App.js در شاخه Src را باز کنید، خواهید دید که نوار جهت‌یابی به همراه ۵ بخش دیگر، در کجا قرار دارند.

کامپوننت هر بخش، یک عنوان و یک زیر عنوان را می‌پذیرد. از آنجایی که من فقط در حال استفاده از برخی متون بی معنی در بخش‌های مختلف هستم، متون مورد نظر را به فایلی به نام DummyText.js اضافه کردم، آن را وارد کردم و به کامپوننت هر بخش منتقل کردم.

برای اجرای برنامه، می‌توانید از این دستور استفاده کنید:

npm start

این کد، برنامه را در حالت توسعه شروع خواهد کرد و وقتی که یکی از فایل‌های خود را ذخیره می‌کنید، به طور خودکار برنامه را refresh خواهد کرد. شما می‌توانید صفحه مورد نظر را در برنامه خود و بر روی آدرس localhost:3000 مشاهده کنید.

نصب و پیکربندی React-Scroll

حال زمان آن فرا رسیده است که پکیج react-scroll را نصب کنید و آن عملکرد را اضافه کنید.

برای نصب این پکیج، این دستور را اجرا کنید:

npm install react-scroll

سپس فایل Navbar.js را باز کنید و یک import برای هر کدام از دو import نامگذاری شده، یعنی «Link» و «animatedScroll» اضافه کنید. دقت کنید که من نام animatedScroll را در جهت استفاده راحت‌تر، به scroll تغییر داده‌ام.

import { Link, animateScroll as scroll } from "react-scroll";

حال که تمام چهار import خود را تعریف کردیم، می‌توانیم آیتم‌های جهت‌یابی خود را بروزرسانی کنیم تا از کامپوننت Link استفاده کنند. این کامپوننت چند ویژگی را می‌پذیرد. ما بیشتر به activeClass، to، spy، smooth، offset و duration توجه خواهیم کرد.

• activeClass - کلاسی که در هنگام رسیدن به عنصر، اعمال می‌شود.
• to - هدفی که می‌خواهیم به آن اسکرول کنیم.
• spy - وقتی که اسکرول به موقعیت هدف خود رسیده است، Link را انتخاب (select) کن.
• smooth - اسکرول را پویانمایی کن.
• offset - پیکسل‌های اضافی اسکرول. (مانند padding)
• duration - مدت زمان انیمیشن اسکرول که می‌تواند یک عدد یا یک تابع باشد.

ویژگی to مهم‌ترین بخش است؛ زیرا به کامپوننت می‌گوید که به کدام عناصر اسکرول کند. در این مورد، این عنصر هر کدام از بخش‌های محتویات ما خواهد بود.

با ویژگی «offset»، شما می‌توانید یک مقدار اسکرول کردن اضافی تعریف کنید تا به هر بخش بروید.

«Duration» به خوبی خودش را توضیح می‌دهد، و در چند دقیقه بعد به «spy» و «activeClass» باز خواهیم گشت.

در اینجا مثالی از ویژگی‌هایی که ما برای هر کامپوننت Link استفاده خواهیم کرد را مشاهده می‌نمایید. تنها تفاوت میان آن‌ها، ویژگی «to» خواهد بود؛ زیرا هر کدام به یک بخش مختلف خواهند رفت.

<Link

    activeClass="active"

    to="section1"

    spy={true}

    smooth={true}

    offset={-70}

    duration= {500}

>

شما باید هر کدام از آیتم‌های جهت‌یابی را به ترتیب بروزرسانی کنید. با اضافه شدن این موارد، باید بتوانید به مرورگر خود بازگردید (برنامه شما باید به طور خودکار restart شده باشد) و اسکرول کردن را در عمل ببینید.

استایل‌بندی لینک‌های فعال

ویژگی active class ما را قادر می‌سازد که یک کلاس را تعریف کنیم، تا وقتی که عنصر «to» آن فعال است، آن را به کامپوننت Link اعمال کنیم. یک Link‌ وقتی که عنصر «to» آن در نزدیکی بالای صفحه در دید باشد، فعال به حساب می‌آید. این مسئله می‌تواند با کلیک بر روی خود لینک یا با اسکرول کردن به صورت دستی به بخش مورد نظر فعال شود. برای اثبات آن، من Dev Tools را در Chrome باز کردم و به این صورت پنجمین لینک را بازرسی کردم. وقتی که بر روی آن لینک کلیک می‌کنم، یا خودم به پایین صفحه اسکرول می‌کنم، کلاس active اعمال می‌شود.

برای استفاده از این مسئله به نفع خودمان، یک active class ایجاد می‌کنیم و یک آندرلاین به لینک مورد نظر اضافه می‌کنیم. شما می‌توانیم این تکه CSS را در فایل App.css در شاخه Src اضافه کنید.

.nav-item > .active {

    border-bottom: 1px solid #333;

}

حال اگر به مرورگر بازگردید و کمی اسکرول کنید، باید ببینید که لینک مناسب آندرلاین شده است.

توابع اضافی

برای آخرین تکه محتویات، این پکیج همچنین مقداری عملکرد فراهم می‌کند که می‌تواند به مانند scrollToTop، scrollToButtom و...، به همراه رویدادهای مختلف دیگر که می‌توانید مدیریت کنید، مستقیما فراخوانی شود. معمولا لوگوی برنامه در نوار جهت‌یابی، کاربر را به صفحه خانه یا بالای صفحه فعلی می‌برد. به عنوان یک مثال ساده برای نحوه فراخوانی یکی از این توابع، من یک click handler به تصویر برند نوار جهت‌یابی اضافه کردم، تا کاربر را به این صورت به بالای صفحه اسکرول کنم:

scrollToTop = () => {

    scroll.scrollToTop(); 

};

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

خلاصه

همانطور که گفتم، اسکرول کردن نرم یکی از امکاناتی است که می‌تواند ارزش زیبایی زیادی به برنامه شما اضافه کند. همانطور که می‌توانید حدث بزنید، با استفاده از پکیج react-scroll پیاده‌سازی آن بسیار ساده است، پس کاملا ارزش تلاش کردن را دارد.

منبع