آموزش نرم (smooth) کردن اسکرول در وب

سلام دوباره 👋
بازم می‌خوایم به یه چیز جدید در طراحی وب بپردازیم!

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

اما مشکلمون!
خب، یه راه حل خفن براش وجود داره به اسم Smooth Scrolling یا همون اسکرول نرم و روان. اینجا میخوام برات توضیح بدم این چیه و چطوری کار میکنه.
با من همراه باش…

اسکرول معمولی چیه؟

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

Smooth Scrolling چیه؟

حالا smooth scrolling میاد یه جورایی این حرکت یهویی رو نرم و روان می‌کنه. یعنی به جای اینکه صفحه یهو بپره، یه حرکت نرم و آروم داره که چشم آدمو اذیت نمیکنه و حس خیلی بهتری بهت میده. و البته به نظر از قوانین حرکتی پیروی میکنه!

چطوری فعالش کنم؟

خب، حالا که فهمیدی smooth scrolling چیه، احتمالا دلت می‌خواد بدونی چطوری میتونی ازش استفاده کنی.
راههای مختلفی براش وجود داره:

1. تنظیمات مرورگر: بعضی از مرورگرها به صورت پیشفرض این قابلیت رو روشن می‌کنن. اما اگه روشن نیست، میتونی بری تو تنظیمات مرورگرت و ببینی آیا گزینه‌ای براش وجود داره یا نه.
2. استفاده از CSS: اگه یه توسعه‌دهنده وب هستی یا یه کم با کدها آشنا هستی، میتونی از CSS استفاده کنی تا اسکرول رو smooth کنی. یه کد ساده مثل این می‌تونه کمکت کنه:
   css

   <span class="token selector">html</span> <span class="token punctuation">{</span> <span class="token property">scroll-behavior</span><span class="token punctuation">:</span> smooth<span class="token punctuation">;</span> <span class="token punctuation">}</span>

   1 2 3

   <span class="token selector">html</span> <span class="token punctuation">{</span>     <span class="token property">scroll-behavior</span><span class="token punctuation">:</span> smooth<span class="token punctuation">;</span> <span class="token punctuation">}</span>

   این پراپرتی رو می‌تونی تو فایل CSS سایتت اضافه کنی و بعدش میبینی که اسکرول خیلی نرم‌تر می‌شه.

3. افزونه‌های مرورگر: اگه مرورگرت به صورت پیش‌فرض smooth scrolling نداره، می‌تونی از افزونه‌ها استفاده کنی.
   یه سری افزونه‌ها هستن که این قابلیت رو به مرورگرت اضافه می‌کنن.

چرا Smooth Scrolling مهمه؟

اول اینکه تجربه کاربری رو خیلی بهتر میکنه. وقتی اسکرول نرم و روان باشه، کاربر احساس راحتی بیشتری می‌کنه و بیشتر تو سایت می‌مونه. دوم اینکه این قابلیت می‌تونه به چشم‌ها استراحت بده. حرکت‌های ناگهانی و پرشی ممکنه چشم رو خسته کنه، ولی اسکرول نرم این مشکل رو نداره.

مشکلات Smooth Scrolling

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

هر سوالی داشتی یا نیاز به راهنمایی داشتی، زیر این پست کامنت بزار؛
در اسرع وقت پاسخ می‌دم! 😉