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

And here is a video that shows it better:

overscroll-behavior: contain

از نام او، ارزش contain خواهد شد حاوی پیمایش در مرز عنصر در شکل زیر، طومار درون پاکت مشخص شده با رنگ آبی قرار دارد.

و در اینجا یک ویدیو است که آن را بهتر نشان می دهد:

overscroll-behavior: none

چه زمانی none تنظیم شده است اثری مشابه دارد contain، ** علاوه بر این** برای جلوگیری از جلوه جهش در هنگام رسیدن به بالا یا پایین صفحه.

از موارد و مثال استفاده کنید

حالا که ایده ای دارید که چگونه overscroll-behavior کار می کند، اجازه دهید به چند مورد استفاده مفید نگاه کنیم.

ناوبری موبایل

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

اگر اسکرول موجود نباشد، باعث می شود محتوای اصلی پیمایش شود. ما می توانیم از این امر اجتناب کنیم

.nav {
  overscroll-behavior-y: contain;
  overflow-y: auto;
}

بیایید آن را در ویدیو ببینیم. من یک پس‌زمینه نیمه شفاف اضافه کرده‌ام تا ناوبری بتواند زیر آن را ببیند. دقت کنید وقتی خاموشش می کنم چگونه رفتار می کند overscroll-behavior-y دارایی

وقتی خاموش شود، پیمایش بدنه اتفاق می‌افتد.

نکته جالبی که باید در نظر داشت این است که وقتی پیمایش کوتاه است (و در نتیجه قابل پیمایش نیست) و کاربر بدون دلیل سعی کرده است پیمایش کند، بدن حتی اگر پیمایش کند overscroll-behavior-y: contain تنظیم شده است.

متأسفانه، راه حل دیگری به جز «هک‌هایی» که در ابتدای مقاله ارائه شد، نمی‌دانم.

ناوبری جانبی

یکی دیگر از کاربردهای مفید برای overscroll-behavior زمانی است که شما یک سایدبار و یک نوار اصلی دارید. در این حالت، نوار کناری ثابت است و اگر محتوای آن بیش از حد طولانی باشد، ممکن است قابل پیمایش باشد.

برای جلوگیری از پیمایش بخش اصلی با رسیدن به حد نهایی نوار کناری، باید موارد زیر را اضافه کنیم:

.aside {
  overscroll-behavior-y: contain;
}

جزء چت

با الهام از فیس بوک، جزء چت یک مورد استفاده عالی است overscroll-behavior. ما می توانیم از آن برای جلوگیری از پیمایش بدنه زمانی که به انتهای آن رسیدیم استفاده کنیم.

.aside {
  overscroll-behavior-y: contain;
}

محتوای مودال

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

به لیست گزینه های موجود در مدال توجه کنید. این یک لیست قابل پیمایش است. اگر به حد آن برسیم، محتوای مدال اسکرول می‌شود. برای جلوگیری از این، می توانیم استفاده کنیم overscroll-behavior.

.list-wrapper {
  overscroll-behavior-y: contain;
  overflow-y: auto;
  max-height: 130px;
}

لیست افقی

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

این یک استفاده خوب برای overscroll-behavior-x.

.list {
  overscroll-behavior-x: contain;
}

نتیجه گیری

CSS overscroll-behavior یک ویژگی مفید است که مشکلی را که سال ها پیش هک می کردیم را حل می کند. امیدوارم از این مقاله چیز جدیدی یاد گرفته باشید.

آیا موارد استفاده مفید دیگری برای آن می شناسید؟ اگر چنین است، من دوست دارم از شما در توییتر @shadeed9 بشنوم.