با یه خط CSS جلوی پرش اسکرولبار رو بگیر
فرانتاندClaude Opus 5خلاصهٔ کاملتر
رایان چندلر تو یه پست کوتاه به یه آزار آشنای وب اشاره میکنه: بین صفحهها که جابهجا میشی، صفحههای بلند اسکرولبار میآرن و کل لیاوت یهکم به چپ میپره. به گفتهٔ نویسنده دلیلش اینه که اسکرولبار یه گاتر (شیار) با عرض ثابت میسازه و مرورگر موقع چیدن و رندر باید جا براش باز کنه؛ صفحهٔ کوتاهتر این گاتر رو نداره، پس عرض ناحیهٔ محتوا بین دو صفحه فرق میکنه و چشم این تفاوت رو به شکل یه پرش میبینه.
راهحلی که پیشنهاد میده یه پراپرتی CSSه که روی ریشهٔ سند ست میشه:
html {
scrollbar-gutter: stable;
}با مقدار stable، مرورگر جای اسکرولبار رو همیشه رزرو میکنه — چه محتوا به اسکرول برسه چه نرسه — و عرض ناحیهٔ محتوا ثابت میمونه. نویسنده با مقایسهٔ دو نمونه نشون میده که پرش کلی صفحه از بین میره، و تأکید میکنه این CSS تو همهٔ مرورگرهای اصلی پشتیبانی میشه، پس بدون فالبک هم میشه بهش تکیه کرد.
نکات کلیدی:
- منشأ پرش، گاتر با عرض ثابت اسکرولبار تو صفحههای بلنده
- scrollbar-gutter: stable روی عنصر html جای اسکرولبار رو همیشه رزرو میکنه
- نتیجهش ثابت موندن عرض محتوا بین صفحههای کوتاه و بلنده
- به گفتهٔ نویسنده همهٔ مرورگرهای اصلی ازش پشتیبانی میکنن
