M

MLOG

فارسی

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

رفتار اسکرول CSS: راهنمای جامع برای پیمایش روان

در چشم انداز توسعه وب امروزی، تجربه کاربری (UX) حرف اول را می زند. یک جزئیات به ظاهر کوچک که می تواند به طور قابل توجهی بر UX تأثیر بگذارد، هموار بودن پیمایش است. دیگر خبری از پرش های ناگهانی بین بخش ها نیست! ویژگی scroll-behavior CSS یک راه ساده و در عین حال قدرتمند برای پیاده سازی پیمایش روان ارائه می دهد و دسترسی وب سایت و رضایت کلی کاربر را افزایش می دهد. این راهنما یک بررسی جامع از scroll-behavior ارائه می دهد، که همه چیز را از پیاده سازی اساسی تا سفارشی سازی پیشرفته و ملاحظات سازگاری مرورگر برای یک مخاطب واقعاً جهانی پوشش می دهد.

رفتار اسکرول CSS چیست؟

ویژگی scroll-behavior در CSS به شما امکان می دهد رفتار پیمایش را برای یک جعبه پیمایش مشخص کنید. به طور پیش فرض، پیمایش آنی است و منجر به پرش های ناگهانی هنگام پیمایش بین قسمت های مختلف یک صفحه می شود. scroll-behavior: smooth; این را تغییر می دهد و یک انتقال متحرک و روان را هنگام پیمایش فعال می کند، چه با کلیک کردن روی یک لینک لنگر، استفاده از کلیدهای جهت دار یا شروع برنامه ریزی پیمایش.

پیاده سازی اولیه scroll-behavior: smooth;

ساده ترین راه برای فعال کردن پیمایش روان، اعمال ویژگی scroll-behavior: smooth; به عنصر html یا body است. این باعث می شود تمام پیمایش در داخل نمای درگاه روان باشد.

اعمال به عنصر html:

این به طور کلی روش ترجیح داده شده است زیرا بر رفتار پیمایش کل صفحه تأثیر می گذارد.

html {
  scroll-behavior: smooth;
}

اعمال به عنصر body:

این روش نیز کار می کند اما کمتر رایج است زیرا فقط بر محتوای داخل body تأثیر می گذارد.

body {
  scroll-behavior: smooth;
}

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

پیمایش روان با لینک های لنگر

لینک های لنگر (همچنین به عنوان شناسه های قطعه شناخته می شوند) یک راه رایج برای پیمایش در یک صفحه وب هستند. آنها معمولاً در فهرست مطالب یا وب سایت های تک صفحه ای استفاده می شوند. با scroll-behavior: smooth;، کلیک کردن بر روی یک لینک لنگر یک انیمیشن پیمایش روان را فعال می کند.

ساختار HTML برای لینک های لنگر:





  
بخش 1

  
محتوای بخش 1...






  
بخش 2

  
محتوای بخش 2...






  
بخش 3

  
محتوای بخش 3...

با قانون CSS html { scroll-behavior: smooth; } در محل، کلیک کردن بر روی هر یک از لینک ها در ناوبری منجر به یک انیمیشن پیمایش روان به بخش مربوطه می شود.

هدف قرار دادن عناصر قابل پیمایش خاص

همچنین می توانید scroll-behavior: smooth; را بر روی عناصر قابل پیمایش خاص اعمال کنید، مانند div ها با overflow: auto; یا overflow: scroll;. این به شما امکان می دهد پیمایش روان را در یک ظرف خاص بدون تأثیر بر بقیه صفحه فعال کنید.

مثال: پیمایش روان در یک Div:


  
مقدار زیادی محتوا در اینجا...

  
محتوای بیشتر...

  
حتی محتوای بیشتر...




.scrollable-container {
  width: 300px;
  height: 200px;
  overflow: scroll;
  scroll-behavior: smooth;
}

در این مثال، فقط محتوای داخل .scrollable-container به آرامی اسکرول می شود.

پیمایش روان برنامه ریزی شده با جاوا اسکریپت

در حالی که scroll-behavior: smooth; پیمایش فعال شده توسط تعامل کاربر را مدیریت می کند (مانند کلیک کردن روی لینک های لنگر)، ممکن است لازم باشد پیمایش را به صورت برنامه ریزی شده با استفاده از جاوا اسکریپت شروع کنید. متدهای scrollTo() و scrollBy()، زمانی که با گزینه behavior: 'smooth' ترکیب شوند، راهی برای دستیابی به این هدف ارائه می دهند.

استفاده از scrollTo():

متد scrollTo() پنجره را به یک مختصات خاص اسکرول می کند.

window.scrollTo({
  top: 500,
  left: 0,
  behavior: 'smooth'
});

این کد پنجره را به آرامی به یک افست عمودی 500 پیکسلی از بالا اسکرول می کند.

استفاده از scrollBy():

متد scrollBy() پنجره را به میزان مشخصی اسکرول می کند.

window.scrollBy({
  top: 100,
  left: 0,
  behavior: 'smooth'
});

این کد پنجره را به آرامی 100 پیکسل به پایین اسکرول می کند.

مثال: پیمایش روان به یک عنصر با کلیک دکمه:





  
بخش 3

  
محتوای بخش 3...




const scrollButton = document.getElementById('scrollButton');
const section3 = document.getElementById('section3');

scrollButton.addEventListener('click', () => {
  section3.scrollIntoView({
    behavior: 'smooth'
  });
});

هنگامی که دکمه کلیک می شود، صفحه به آرامی به عنصر "بخش 3" با استفاده از scrollIntoView() اسکرول می شود. این روش اغلب ترجیح داده می شود زیرا موقعیت دقیق عنصر هدف را بدون در نظر گرفتن تغییرات محتوای پویا محاسبه می کند.

سفارشی سازی سرعت و تسهیل اسکرول

در حالی که scroll-behavior: smooth; یک انیمیشن پیمایش روان پیش فرض ارائه می دهد، نمی توانید مستقیماً سرعت یا تسهیل (نرخ تغییر انیمیشن در طول زمان) را با استفاده از CSS به تنهایی کنترل کنید. سفارشی سازی نیاز به جاوا اسکریپت دارد.

نکته مهم: انیمیشن های بیش از حد طولانی یا پیچیده می توانند برای UX مضر باشند و به طور بالقوه باعث بیماری حرکتی یا مانع تعامل کاربر شوند. برای انیمیشن های ظریف و کارآمد تلاش کنید.

سفارشی سازی مبتنی بر جاوا اسکریپت:

برای سفارشی کردن سرعت و تسهیل اسکرول، باید از جاوا اسکریپت برای ایجاد یک انیمیشن سفارشی استفاده کنید. این معمولاً شامل استفاده از کتابخانه هایی مانند GSAP (GreenSock Animation Platform) یا پیاده سازی منطق انیمیشن خود با استفاده از requestAnimationFrame است.

مثال با استفاده از requestAnimationFrame:

function smoothScroll(target, duration) {
  const start = window.pageYOffset;
  const targetPosition = target.getBoundingClientRect().top;
  const startTime = performance.now();

  function animation(currentTime) {
    const timeElapsed = currentTime - startTime;
    const run = ease(timeElapsed, start, targetPosition, duration);
    window.scrollTo(0, run);
    if (timeElapsed < duration) {
      requestAnimationFrame(animation);
    }
  }

  // Easing function (e.g., easeInOutQuad)
  function ease(t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t + b;
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
  }

  requestAnimationFrame(animation);
}

// Example usage:
const targetElement = document.getElementById('section3');
const scrollDuration = 1000; // milliseconds
smoothScroll(targetElement, scrollDuration);

این کد یک تابع smoothScroll را تعریف می کند که یک عنصر هدف و یک مدت زمان را به عنوان ورودی می گیرد. از requestAnimationFrame برای ایجاد یک انیمیشن روان استفاده می کند و شامل یک تابع تسهیل (easeInOutQuad در این مثال) برای کنترل سرعت انیمیشن است. می توانید توابع تسهیل مختلف زیادی را به صورت آنلاین برای دستیابی به جلوه های انیمیشن مختلف پیدا کنید.

ملاحظات دسترسی

در حالی که پیمایش روان می تواند UX را بهبود بخشد، توجه به دسترسی بسیار مهم است. برخی از کاربران ممکن است پیمایش روان را حواس پرت کننده یا حتی گیج کننده بدانند. ارائه راهی برای غیرفعال کردن پیمایش روان برای فراگیری ضروری است.

پیاده سازی یک اولویت کاربر:

بهترین رویکرد احترام به تنظیمات سیستم عامل کاربر برای کاهش حرکت است. پرس و جوهای رسانه ای مانند prefers-reduced-motion به شما امکان می دهند تشخیص دهید که آیا کاربر کاهش حرکت را در تنظیمات سیستم خود درخواست کرده است یا خیر.

استفاده از prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important; /* Override smooth scrolling */
  }
}

این کد اگر کاربر تنظیمات "کاهش حرکت" را در سیستم عامل خود فعال کرده باشد، پیمایش روان را غیرفعال می کند. از پرچم !important استفاده می شود تا اطمینان حاصل شود که این قانون هر اعلان scroll-behavior دیگری را لغو می کند.

ارائه یک ضامن دستی:

همچنین می توانید یک ضامن دستی (به عنوان مثال، یک کادر انتخاب) ارائه دهید که به کاربران امکان می دهد پیمایش روان را فعال یا غیرفعال کنند. این به کاربران کنترل مستقیم تری بر تجربه خود می دهد.



const smoothScrollToggle = document.getElementById('smoothScrollToggle');

smoothScrollToggle.addEventListener('change', () => {
  if (smoothScrollToggle.checked) {
    document.documentElement.style.scrollBehavior = 'smooth';
  } else {
    document.documentElement.style.scrollBehavior = 'auto';
  }
});

این کد یک کادر انتخاب اضافه می کند که به کاربران امکان می دهد پیمایش روان را روشن یا خاموش کنند. به یاد داشته باشید که این اولویت کاربر را حفظ کنید (به عنوان مثال، با استفاده از حافظه محلی) تا در جلسات مختلف به خاطر سپرده شود.

سازگاری مرورگر

scroll-behavior از پشتیبانی خوبی از مرورگر برخوردار است، اما مهم است که از مرورگرهای قدیمی تری که ممکن است از آن پشتیبانی نکنند آگاه باشید. در اینجا خلاصه ای از سازگاری مرورگر آمده است:

ارائه یک جایگزین برای مرورگرهای قدیمی تر:

برای مرورگرهایی که از scroll-behavior پشتیبانی نمی کنند، می توانید از یک polyfill جاوا اسکریپت استفاده کنید. یک polyfill قطعه کدی است که عملکرد یک ویژگی جدیدتر را در مرورگرهای قدیمی تر ارائه می دهد.

مثال: استفاده از یک Polyfill:

چندین کتابخانه جاوا اسکریپت وجود دارد که polyfill های پیمایش روان را ارائه می دهند. یک گزینه استفاده از کتابخانه ای مانند "smoothscroll-polyfill" است.

این کد کتابخانه "smoothscroll-polyfill" را شامل می شود و آن را مقداردهی اولیه می کند. این عملکرد پیمایش روان را در مرورگرهای قدیمی تری که به طور بومی از scroll-behavior پشتیبانی نمی کنند، ارائه می دهد.

بارگیری مشروط: بارگیری مشروط polyfill را با استفاده از یک لودر اسکریپت یا تشخیص ویژگی برای جلوگیری از سربار غیر ضروری در مرورگرهای مدرن در نظر بگیرید.

بهترین روش ها برای پیمایش روان

در اینجا برخی از بهترین روش ها وجود دارد که باید هنگام پیاده سازی پیمایش روان در نظر داشته باشید:

مشکلات و راه حل های رایج

در اینجا برخی از مشکلات رایجی که ممکن است هنگام پیاده سازی پیمایش روان با آن مواجه شوید و راه حل های آنها آورده شده است:

تکنیک ها و ملاحظات پیشرفته

فراتر از اصول اولیه، چندین تکنیک و ملاحظات پیشرفته برای بهبود پیاده سازی پیمایش روان شما وجود دارد.

استفاده از scroll-margin و scroll-padding:

این ویژگی های CSS کنترل دقیق تری بر رفتار ضربه محکم و ناگهانی پیمایش ارائه می دهند و به جلوگیری از پنهان شدن محتوا توسط هدرها یا پاورقی های ثابت کمک می کنند.

مثال:

section {
  scroll-margin-top: 20px; /* Adds a 20px margin above each section when scrolling */
}

html {
  scroll-padding-top: 60px; /* Adds 60px padding at the top of the viewport when scrolling */
}

ترکیب با Intersection Observer API:

Intersection Observer API به شما امکان می دهد تشخیص دهید که چه زمانی یک عنصر وارد نمای درگاه می شود یا از آن خارج می شود. می توانید از این API برای فعال کردن انیمیشن های پیمایش روان بر اساس قابلیت مشاهده عناصر استفاده کنید.

مثال:

const sections = document.querySelectorAll('section');

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Do something when the section is in view
      console.log('Section ' + entry.target.id + ' is in view');
    } else {
      // Do something when the section is out of view
      console.log('Section ' + entry.target.id + ' is out of view');
    }
  });
}, {
  threshold: 0.5 // Trigger when 50% of the element is visible
});

sections.forEach(section => {
  observer.observe(section);
});

این کد از Intersection Observer API برای تشخیص اینکه چه زمانی هر بخش وارد نمای درگاه می شود یا از آن خارج می شود استفاده می کند. سپس می توانید از این اطلاعات برای فعال کردن انیمیشن های پیمایش روان سفارشی یا سایر جلوه های بصری استفاده کنید.

دیدگاه های جهانی در مورد رفتار اسکرول

در حالی که پیاده سازی فنی پیمایش روان در سطح جهانی ثابت باقی می ماند، ملاحظات فرهنگی و زمینه ای می تواند بر قابلیت استفاده درک شده آن تأثیر بگذارد.

نتیجه گیری

scroll-behavior: smooth; یک ویژگی CSS ارزشمند است که می تواند به طور قابل توجهی تجربه کاربری وب سایت شما را افزایش دهد. با درک پیاده سازی اساسی، گزینه های سفارشی سازی، ملاحظات دسترسی و سازگاری مرورگر آن، می توانید یک تجربه مرور یکپارچه و لذت بخش برای کاربران در سراسر جهان ایجاد کنید. به یاد داشته باشید که دسترسی را در اولویت قرار دهید، عملکرد را بهینه کنید و به طور کامل آزمایش کنید تا اطمینان حاصل کنید که پیاده سازی پیمایش روان شما نیازهای همه کاربران شما را برآورده می کند. با پیروی از دستورالعمل ها و بهترین روش های ذکر شده در این راهنما، می توانید در پیمایش روان تسلط پیدا کنید و وب سایتی ایجاد کنید که هم از نظر بصری جذاب و هم برای مخاطبان جهانی کاربرپسند باشد.