‏با scroll-axis-lock اسکرول مورب رو آزاد کن

وقتی روی یه ناحیهٔ دوبعدی اسکرول می‌کنی، مرورگر پشت صحنه کلی کار می‌کنه تا مسیرت صاف بمونه. یکی از این کارها قفل‌کردن محور اسکرول یا همون railing ـه: اگه حرکتت مثلاً ۵۰۰ پیکسل عمودی و فقط ۳ پیکسل افقی باشه، مرورگر نتیجه می‌گیره که قصدت یه اسکرول کاملاً عمودی بوده و اون ۳ پیکسل رو نادیده می‌گیره. نویسنده می‌گه این رفتار بیشتر وقت‌ها به نفع کاربره و جلوی اسکرول‌های ناخواسته تو محور دیگه رو می‌گیره.

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

تغییری که تازه تو مشخصات CSS Overflow 5 اومده، کنترل این رفتار رو می‌ده دست توسعه‌دهنده. پراپرتی scroll-axis-lock دو مقدار داره: auto که همون رفتار پیش‌فرض مرورگره، و none که مکانیزم قفل رو کامل خاموش می‌کنه تا کانتینر دقیقاً ورودی کاربر رو دنبال کنه و پن مورب بدون محدودیت انجام بشه.

.scroller {
  scroll-axis-lock: auto; /* Default */
  /* or */
  scroll-axis-lock: none;
}

نویسنده یه دمو ساخته که دلتاهای X و Y پوینتر رو با مقدار واقعی scrollLeft و scrollTop کانتینر مقایسه می‌کنه. با auto ممکنه هشدار «Axis Locked» رو ببینی، یعنی مرورگر داره ورودی عمودبر حرکتت رو دور می‌ندازه؛ با none اسکرول مستقیم کمی لرزون‌تر می‌شه ولی حرکت مورب بلافاصله هر دو جهت رو با هم پن می‌کنه.

از نظر پشتیبانی فعلاً فقط کرومیوم ۱۵۳ این پراپرتی رو داره و فایرفاکس و سافاری هنوز نه. نویسنده می‌گه نیازی به فیچر دتکشن نیست و می‌تونی همین حالا به‌عنوان یه بهبود تدریجی ازش استفاده کنی، چون نادیده گرفته‌شدنش چیزی رو خراب نمی‌کنه؛ اگه واقعاً لازم شد هم با @supports تو CSS یا CSS.supports() تو جاوااسکریپت می‌شه چکش کرد.

نکات کلیدی:

• قفل محور اسکرول (railing) دلتاهای جزئی تو محور فرعی رو نادیده می‌گیره
• scroll-axis-lock: none این قفل رو خاموش می‌کنه و اسکرول مورب آزاد می‌شه
• مقدار پیش‌فرض auto ـه و رفتارش بین مرورگرها و پلتفرم‌ها فرق داره
• فعلاً فقط کرومیوم ۱۵۳ پشتیبانی می‌کنه؛ فایرفاکس و سافاری نه
• بدون فیچر دتکشن هم قابل استفاده‌ست، چون نادیده گرفتنش ضرری نداره