رفتار اسکرول 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
از پشتیبانی خوبی از مرورگر برخوردار است، اما مهم است که از مرورگرهای قدیمی تری که ممکن است از آن پشتیبانی نکنند آگاه باشید. در اینجا خلاصه ای از سازگاری مرورگر آمده است:
- Chrome: از نسخه 61 پشتیبانی می شود
- Firefox: از نسخه 36 پشتیبانی می شود
- Safari: از نسخه 14.1 پشتیبانی می شود (پشتیبانی جزئی در نسخه های قبلی)
- Edge: از نسخه 79 پشتیبانی می شود
- Opera: از نسخه 48 پشتیبانی می شود
- Internet Explorer: پشتیبانی نمی شود
ارائه یک جایگزین برای مرورگرهای قدیمی تر:
برای مرورگرهایی که از scroll-behavior
پشتیبانی نمی کنند، می توانید از یک polyfill جاوا اسکریپت استفاده کنید. یک polyfill قطعه کدی است که عملکرد یک ویژگی جدیدتر را در مرورگرهای قدیمی تر ارائه می دهد.
مثال: استفاده از یک Polyfill:
چندین کتابخانه جاوا اسکریپت وجود دارد که polyfill های پیمایش روان را ارائه می دهند. یک گزینه استفاده از کتابخانه ای مانند "smoothscroll-polyfill" است.
این کد کتابخانه "smoothscroll-polyfill" را شامل می شود و آن را مقداردهی اولیه می کند. این عملکرد پیمایش روان را در مرورگرهای قدیمی تری که به طور بومی از scroll-behavior
پشتیبانی نمی کنند، ارائه می دهد.
بارگیری مشروط: بارگیری مشروط polyfill را با استفاده از یک لودر اسکریپت یا تشخیص ویژگی برای جلوگیری از سربار غیر ضروری در مرورگرهای مدرن در نظر بگیرید.
بهترین روش ها برای پیمایش روان
در اینجا برخی از بهترین روش ها وجود دارد که باید هنگام پیاده سازی پیمایش روان در نظر داشته باشید:
- آن را ظریف نگه دارید: از انیمیشن های بیش از حد طولانی یا پیچیده که می توانند حواس پرت کننده یا باعث بیماری حرکتی شوند، خودداری کنید.
- دسترسی را در نظر بگیرید: راهی را برای کاربران فراهم کنید تا در صورت گمراه کننده بودن پیمایش روان، آن را غیرفعال کنند. به تنظیمات کاربر برای کاهش حرکت احترام بگذارید.
- تست بر روی دستگاه های مختلف: اطمینان حاصل کنید که پیمایش روان به خوبی بر روی دستگاه ها و اندازه صفحه نمایش های مختلف کار می کند.
- بهینه سازی عملکرد: از فعال کردن بیش از حد انیمیشن های پیمایش روان خودداری کنید، زیرا این می تواند بر عملکرد تأثیر بگذارد.
- از لینک های لنگر معنادار استفاده کنید: اطمینان حاصل کنید که لینک های لنگر به بخش های به وضوح تعریف شده در صفحه اشاره دارند.
- از همپوشانی محتوا خودداری کنید: مراقب هدرهای ثابت یا سایر عناصری باشید که ممکن است روی هدف پیمایش همپوشانی داشته باشند. از ویژگی های CSS مانند
scroll-padding-top
یا جاوا اسکریپت برای تنظیم موقعیت پیمایش بر اساس آن استفاده کنید.
مشکلات و راه حل های رایج
در اینجا برخی از مشکلات رایجی که ممکن است هنگام پیاده سازی پیمایش روان با آن مواجه شوید و راه حل های آنها آورده شده است:
- مشکل: پیمایش روان کار نمی کند.
- راه حل: دوباره بررسی کنید که
scroll-behavior: smooth;
به عنصرhtml
یاbody
اعمال شده باشد. اطمینان حاصل کنید که لینک های لنگر به درستی به بخش های مربوطه اشاره می کنند. تأیید کنید که هیچ قانون CSS متناقضی وجود ندارد که ویژگیscroll-behavior
را لغو کند.
- راه حل: دوباره بررسی کنید که
- مشکل: پیمایش روان خیلی کند یا خیلی سریع است.
- راه حل: سرعت پیمایش را با استفاده از جاوا اسکریپت، همانطور که در بخش "سفارشی سازی سرعت و تسهیل اسکرول" توضیح داده شد، سفارشی کنید. با توابع تسهیل مختلف آزمایش کنید تا تعادل مناسب بین روانی و پاسخگویی را پیدا کنید.
- مشکل: هدر ثابت با هدف پیمایش همپوشانی دارد.
- راه حل: از ویژگی
scroll-padding-top
در CSS برای افزودن padding به بالای ظرف پیمایش استفاده کنید. از طرف دیگر، از جاوا اسکریپت برای محاسبه ارتفاع هدر ثابت و تنظیم موقعیت پیمایش بر اساس آن استفاده کنید.
- راه حل: از ویژگی
- مشکل: پیمایش روان با سایر عملکردهای جاوا اسکریپت تداخل می کند.
- راه حل: اطمینان حاصل کنید که کد جاوا اسکریپت شما با انیمیشن پیمایش روان تداخل ندارد. از شنوندگان رویداد و کال بک ها برای هماهنگی اجرای توابع مختلف جاوا اسکریپت استفاده کنید.
تکنیک ها و ملاحظات پیشرفته
فراتر از اصول اولیه، چندین تکنیک و ملاحظات پیشرفته برای بهبود پیاده سازی پیمایش روان شما وجود دارد.
استفاده از scroll-margin
و scroll-padding
:
این ویژگی های CSS کنترل دقیق تری بر رفتار ضربه محکم و ناگهانی پیمایش ارائه می دهند و به جلوگیری از پنهان شدن محتوا توسط هدرها یا پاورقی های ثابت کمک می کنند.
scroll-margin
: حاشیه اطراف ناحیه ضربه محکم و ناگهانی پیمایش را تعریف می کند.scroll-padding
: padding اطراف ناحیه ضربه محکم و ناگهانی پیمایش را تعریف می کند.
مثال:
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 برای تشخیص اینکه چه زمانی هر بخش وارد نمای درگاه می شود یا از آن خارج می شود استفاده می کند. سپس می توانید از این اطلاعات برای فعال کردن انیمیشن های پیمایش روان سفارشی یا سایر جلوه های بصری استفاده کنید.
دیدگاه های جهانی در مورد رفتار اسکرول
در حالی که پیاده سازی فنی پیمایش روان در سطح جهانی ثابت باقی می ماند، ملاحظات فرهنگی و زمینه ای می تواند بر قابلیت استفاده درک شده آن تأثیر بگذارد.
- سرعت اینترنت: در مناطقی با سرعت اتصال به اینترنت پایین تر، کتابخانه های بزرگ جاوا اسکریپت برای انیمیشن های سفارشی می تواند به طور منفی بر زمان بارگذاری و UX تأثیر بگذارد. راه حل های سبک و بارگیری مشروط را در اولویت قرار دهید.
- قابلیت های دستگاه: برای طیف گسترده ای از دستگاه ها، از رایانه های رومیزی پیشرفته گرفته تا تلفن های همراه کم قدرت، بهینه سازی کنید. به طور کامل بر روی دستگاه ها و اندازه صفحه نمایش های مختلف آزمایش کنید.
- استانداردهای دسترسی: به استانداردهای دسترسی بین المللی مانند WCAG (Web Content Accessibility Guidelines) پایبند باشید تا از فراگیری برای کاربران دارای معلولیت اطمینان حاصل کنید.
- انتظارات کاربر: در حالی که پیمایش روان به طور کلی به خوبی دریافت می شود، مراقب تفاوت های فرهنگی احتمالی در انتظارات کاربر در مورد انیمیشن و حرکت باشید. برای جمع آوری بازخورد با گروه های کاربری متنوع آزمایش کنید.
نتیجه گیری
scroll-behavior: smooth;
یک ویژگی CSS ارزشمند است که می تواند به طور قابل توجهی تجربه کاربری وب سایت شما را افزایش دهد. با درک پیاده سازی اساسی، گزینه های سفارشی سازی، ملاحظات دسترسی و سازگاری مرورگر آن، می توانید یک تجربه مرور یکپارچه و لذت بخش برای کاربران در سراسر جهان ایجاد کنید. به یاد داشته باشید که دسترسی را در اولویت قرار دهید، عملکرد را بهینه کنید و به طور کامل آزمایش کنید تا اطمینان حاصل کنید که پیاده سازی پیمایش روان شما نیازهای همه کاربران شما را برآورده می کند. با پیروی از دستورالعمل ها و بهترین روش های ذکر شده در این راهنما، می توانید در پیمایش روان تسلط پیدا کنید و وب سایتی ایجاد کنید که هم از نظر بصری جذاب و هم برای مخاطبان جهانی کاربرپسند باشد.