M

MLOG

فارسی

راهنمای جامع CSS scroll-margin، برای ایجاد ناوبری روان با هدرهای ثابت از طریق آفست کردن لینک‌های لنگر. تکنیک‌های پیاده‌سازی عملی را برای تجربه کاربری بهتر بیاموزید.

حاشیه اسکرول CSS: تسلط بر لنگرگذاری آفست برای هدرهای ثابت

پیمایش صفحات وب طولانی با هدرهای ثابت اغلب می‌تواند منجر به یک تجربه کاربری ناامیدکننده شود. وقتی کاربر روی یک لینک لنگر کلیک می‌کند، مرورگر به عنصر هدف می‌پرد، اما هدر ثابت قسمت بالایی آن عنصر را می‌پوشاند. اینجاست که CSS scroll-margin و scroll-padding به کمک می‌آیند و روشی ساده اما قدرتمند برای آفست کردن لینک‌های لنگر و تضمین ناوبری روان فراهم می‌کنند.

درک مشکل: مانع هدر ثابت

هدرهای ثابت یک عنصر طراحی رایج در وب‌سایت‌های مدرن هستند که با فراهم کردن ناوبری پایدار، قابلیت استفاده را افزایش می‌دهند. با این حال، آنها مشکلی را به وجود می‌آورند: وقتی کاربر روی یک لینک داخلی (لینک لنگر) که به بخش خاصی از صفحه اشاره دارد کلیک می‌کند، مرورگر عنصر هدف را به بالاترین قسمت ویوپورت اسکرول می‌کند. اگر هدر ثابت وجود داشته باشد، قسمت بالایی عنصر هدف را می‌پوشاند و این باعث می‌شود کاربر نتواند بلافاصله محتوایی را که قصد مشاهده آن را داشته ببیند. این موضوع به ویژه در دستگاه‌های موبایل با صفحه‌های کوچک‌تر می‌تواند مشکل‌ساز باشد. تصور کنید کاربری در توکیو در حال پیمایش یک مقاله خبری طولانی در گوشی هوشمند خود است؛ او روی یک لینک لنگر به یک بخش خاص کلیک می‌کند، اما متوجه می‌شود که آن بخش تا حدی توسط هدر پنهان شده است. این اختلال تجربه کاربری کلی را کاهش می‌دهد.

معرفی scroll-margin و scroll-padding

CSS دو ویژگی را برای حل این مشکل ارائه می‌دهد: scroll-margin و scroll-padding. اگرچه به نظر مشابه می‌رسند، اما به طور متفاوتی کار می‌کنند و جنبه‌های مختلفی از رفتار اسکرول را هدف قرار می‌دهند.

در زمینه هدرهای ثابت، scroll-margin-top معمولاً مرتبط‌ترین ویژگی است. با این حال، بسته به طرح‌بندی شما، ممکن است نیاز به تنظیم حاشیه‌های دیگر نیز داشته باشید.

استفاده از scroll-margin-top برای آفست هدر ثابت

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

  1. ارتفاع هدر ثابت خود را مشخص کنید: از ابزارهای توسعه‌دهنده مرورگر خود برای بازرسی هدر ثابت و تعیین ارتفاع آن استفاده کنید. این مقداری است که برای scroll-margin-top استفاده خواهید کرد. به عنوان مثال، اگر هدر شما 60 پیکسل ارتفاع دارد، از scroll-margin-top: 60px; استفاده خواهید کرد.
  2. scroll-margin-top را به عناصر هدف اعمال کنید: عناصری را که می‌خواهید آفست شوند انتخاب کنید. اینها معمولاً عناوین شما (<h1>, <h2>, <h3> و غیره) یا بخش‌هایی هستند که لینک‌های لنگر شما به آنها اشاره دارند.

مثال: پیاده‌سازی پایه

فرض کنیم شما یک هدر ثابت با ارتفاع 70 پیکسل دارید. در اینجا CSSی که استفاده خواهید کرد آمده است:

h2 {
  scroll-margin-top: 70px;
}

این قانون CSS به مرورگر می‌گوید که وقتی یک لینک لنگر یک عنصر <h2> را هدف قرار می‌دهد، باید عنصر را به موقعیتی اسکرول کند که حداقل 70 پیکسل فضا بین بالای عنصر <h2> و بالای ویوپورت وجود داشته باشد. این کار از پوشانده شدن عنوان توسط هدر ثابت جلوگیری می‌کند.

مثال: اعمال به چندین سطح از عناوین

شما می‌توانید scroll-margin-top را به چندین سطح از عناوین اعمال کنید تا از رفتار سازگار در سراسر صفحه خود اطمینان حاصل کنید:

h1, h2, h3 {
  scroll-margin-top: 70px;
}

مثال: استفاده از یک کلاس برای بخش‌های خاص

به جای هدف قرار دادن همه عناوین، ممکن است بخواهید آفست را فقط به بخش‌های خاصی اعمال کنید. شما می‌توانید این کار را با افزودن یک کلاس به آن بخش‌ها انجام دهید:

<section id="introduction" class="scroll-offset">
  <h2>Introduction</h2>
  <p>...</p>
</section>

.scroll-offset {
  scroll-margin-top: 70px;
}

استفاده از scroll-padding-top به عنوان جایگزین

scroll-padding-top یک رویکرد جایگزین برای دستیابی به همان نتیجه ارائه می‌دهد. به جای افزودن حاشیه به عنصر هدف، پدینگ را به بالای کانتینر اسکرول اضافه می‌کند.

برای استفاده از scroll-padding-top، شما معمولاً آن را به عنصر <body> اعمال می‌کنید:

body {
  scroll-padding-top: 70px;
}

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

انتخاب بین scroll-margin و scroll-padding

انتخاب بین scroll-margin و scroll-padding اغلب به ترجیح شخصی و طرح‌بندی خاص وب‌سایت شما بستگی دارد. در اینجا یک مقایسه برای کمک به تصمیم‌گیری شما آمده است:

در بیشتر موارد، استفاده از scroll-margin روی عناوین یا بخش‌ها رویکرد ترجیحی است زیرا انعطاف‌پذیری بیشتری را فراهم می‌کند. با این حال، اگر طرح‌بندی ساده‌ای با یک هدر ثابت دارید و یک راه‌حل سریع می‌خواهید، scroll-padding می‌تواند گزینه خوبی باشد.

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

استفاده از متغیرهای CSS برای قابلیت نگهداری

برای بهبود قابلیت نگهداری، می‌توانید از متغیرهای CSS برای ذخیره ارتفاع هدر ثابت خود استفاده کنید. این به شما امکان می‌دهد تا در صورت تغییر ارتفاع هدر، به راحتی آفست را در یک مکان به‌روز کنید.

:root {
  --header-height: 70px;
}

h1, h2, h3 {
  scroll-margin-top: var(--header-height);
}

/* Example of usage with scroll-padding-top */
body {
  scroll-padding-top: var(--header-height);
}

مدیریت ارتفاع‌های دینامیک هدر

در برخی موارد، هدر ثابت شما ممکن است به صورت دینامیک تغییر ارتفاع دهد، به عنوان مثال، در اندازه‌های مختلف صفحه یا زمانی که کاربر صفحه را به پایین اسکرول می‌کند. در این شرایط، شما باید از جاوا اسکریپت برای به‌روزرسانی دینامیک scroll-margin-top یا scroll-padding-top استفاده کنید.

در اینجا یک مثال ساده از نحوه انجام این کار آمده است:

function updateScrollMargin() {
  const headerHeight = document.querySelector('header').offsetHeight;
  document.documentElement.style.setProperty('--header-height', `${headerHeight}px`);
}

// Call the function on page load and when the window is resized
window.addEventListener('load', updateScrollMargin);
window.addEventListener('resize', updateScrollMargin);

این کد جاوا اسکریپت ارتفاع عنصر <header> را دریافت می‌کند و متغیر CSS --header-height را بر اساس آن تنظیم می‌کند. سپس CSS از این متغیر برای تنظیم scroll-margin-top یا scroll-padding-top استفاده می‌کند.

ملاحظات دسترسی‌پذیری

در حالی که scroll-margin و scroll-padding عمدتاً به مسائل بصری می‌پردازند، در نظر گرفتن دسترسی‌پذیری ضروری است. اطمینان حاصل کنید که آفستی که اضافه می‌کنید تأثیر منفی بر کاربرانی که به صفحه‌خوان‌ها یا ناوبری با صفحه‌کلید متکی هستند، نداشته باشد.

در بیشتر موارد، رفتار پیش‌فرض scroll-margin و scroll-padding قابل دسترس است. با این حال، همیشه ایده خوبی است که وب‌سایت خود را با فناوری‌های کمکی آزمایش کنید تا اطمینان حاصل شود که هیچ مشکل غیرمنتظره‌ای وجود ندارد.

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

scroll-margin و scroll-padding سازگاری بسیار خوبی با مرورگرها دارند. آنها توسط همه مرورگرهای مدرن، از جمله کروم، فایرفاکس، سافاری، اج و اپرا پشتیبانی می‌شوند. مرورگرهای قدیمی‌تر ممکن است از این ویژگی‌ها پشتیبانی نکنند، اما به آرامی تنزل پیدا می‌کنند، به این معنی که لینک‌های لنگر همچنان کار خواهند کرد، اما آفست اعمال نخواهد شد.

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

عیب‌یابی مشکلات رایج

در اینجا برخی از مشکلات رایجی که ممکن است هنگام استفاده از scroll-margin و scroll-padding با آنها مواجه شوید، به همراه نکات عیب‌یابی آورده شده است:

مثال‌های دنیای واقعی

بیایید به چند مثال واقعی از نحوه استفاده از scroll-margin و scroll-padding در وب‌سایت‌های محبوب نگاهی بیندازیم:

این مثال‌ها تطبیق‌پذیری scroll-margin و scroll-padding و نحوه استفاده از آنها برای افزایش تجربه کاربری در انواع وب‌سایت‌ها را نشان می‌دهند. به عنوان مثال، یک شرکت نرم‌افزاری مستقر در بنگلور را در نظر بگیرید که یک پورتال مستندات آنلاین با صدها صفحه را نگهداری می‌کند؛ استفاده از `scroll-margin` روی هر عنوان، یک تجربه روان و سازگار را بدون توجه به دستگاه یا مرورگر کاربر تضمین می‌کند.

نتیجه‌گیری

scroll-margin و scroll-padding ویژگی‌های ضروری CSS برای ایجاد یک تجربه ناوبری روان و کاربرپسند در وب‌سایت‌هایی با هدرهای ثابت هستند. با درک نحوه کار این ویژگی‌ها و نحوه اعمال موثر آنها، می‌توانید اطمینان حاصل کنید که کاربران شما می‌توانند به راحتی وب‌سایت شما را پیمایش کرده و محتوای مورد نظر خود را بدون ناامیدی پیدا کنند. از یک وبلاگ ساده گرفته تا یک پلتفرم تجارت الکترونیک پیچیده که مشتریان را در بازارهای متنوعی مانند سائوپائولو و سنگاپور هدف قرار می‌دهد، پیاده‌سازی `scroll-margin` یک ناوبری مداوم دلپذیر و بصری را تضمین می‌کند و در نتیجه قابلیت استفاده و موفقیت کلی وب‌سایت شما را افزایش می‌دهد. بنابراین، این ویژگی‌ها را بپذیرید و تجربه کاربری پروژه‌های وب خود را امروز ارتقا دهید!

مطالعه بیشتر