سرریز

پادکست CSS - 034: Overflow

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

دو گزینه مختلف برش در CSS وجود دارد. text-overflow به خطوط منفرد متن کمک می کند و ویژگی های overflow به کنترل سرریز در مدل جعبه کمک می کند.

سرریز تک خطی با text-overflow

از ویژگی text-overflow در هر عنصری که حاوی گره(های) متن است، برای مثال یک پاراگراف، <p> استفاده کنید. مشخص می کند که وقتی متن در فضای موجود عنصر قرار نمی گیرد چگونه ظاهر شود. تمام متن های HTML قابل مشاهده در یک صفحه در گره های متنی هستند. برای استفاده از text-overflow به یک خط متن باز نشده نیاز دارید، بنابراین باید overflow نیز روی hidden تنظیم کنید و یک مقدار white-space داشته باشید که از بسته بندی جلوگیری می کند.

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

استفاده از خواص سرریز

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

شما می توانید به سرریز در دو قسمت فکر کنید. عنصر والد دارای یک فضای کاملاً محدود است که تغییر نخواهد کرد. شما می توانید این را به عنوان یک پنجره در نظر بگیرید. عناصر فرزند محتوایی هستند که فضای بیشتری را از والدین می خواهند. شما می توانید این را به عنوان چیزی که از طریق پنجره به آن نگاه می کنید فکر کنید. مدیریت سرریز کمک خواهد کرد که چگونه پنجره این محتوا را قاب بندی کند.

پیمایش در محور عمودی و افقی

ویژگی overflow-y سرریز فیزیکی را در امتداد محور عمودی نمای دستگاه کنترل می‌کند، بنابراین به بالا و پایین پیمایش می‌کند.

ویژگی overflow-x سرریز را در امتداد محور افقی نمای دستگاه کنترل می‌کند، بنابراین به چپ و راست پیمایش کنید.

خواص منطقی برای جهت پیمایش

ویژگی های overflow-inline و overflow-block سرریز را بر اساس جهت سند و حالت نوشتن تنظیم می کنند.

خلاصه overflow

مختصر overflow هر دو سبک overflow-x و overflow-y را در یک خط تنظیم می کند:

overflow: hidden scroll;

اگر دو کلمه کلیدی مشخص شده باشد، اولی برای overflow-x و دومی برای overflow-y اعمال می شود. در غیر این صورت، هم overflow-x و هم overflow-y از یک مقدار استفاده می کنند.

ارزش ها

بیایید نگاهی دقیق تر به مقادیر و کلمات کلیدی موجود برای ویژگی های overflow بیاندازیم.

overflow: visible (پیش فرض)

بدون تنظیم ویژگی، overflow: visible مقدار پیش‌فرض وب است. این تضمین می‌کند که محتوا هرگز ناخواسته پنهان نمی‌شود و از اصول اصلی «هرگز محتوا پنهان نکنید» یا «طرح‌بندی ایمن طرح‌بندی‌های دقیق» پیروی می‌کند.

overflow: hidden

با overflow: hidden در جهت مشخص شده بریده می شود و هیچ نوار پیمایشی برای نمایش آن ارائه نمی شود.

overflow: scroll

overflow: scroll نوارهای پیمایش را فعال می کند تا کاربران بتوانند در محتوا پیمایش کنند. حتی اگر محتوا در حال حاضر مملو نباشد، نوارهای پیمایش وجود خواهند داشت. اگر ظرفی ممکن است در آینده بر اساس تغییر اندازه قابل پیمایش باشد، این یک راه عالی برای کاهش تغییر چیدمان آینده است و کاربر را به صورت بصری برای مناطق قابل پیمایش آماده می کند.

overflow: clip

مانند overflow: hidden ، محتوای دارای overflow: clip به کادر padding عنصر بریده می شود. تفاوت بین clip و hidden در این است که کلمه کلیدی clip نیز هرگونه اسکرول از جمله اسکرول برنامه‌ای را ممنوع می‌کند.

overflow: auto

در نهایت، مقداری که بیشتر مورد استفاده قرار می‌گیرد، overflow: auto . این به تنظیمات کاربر احترام می گذارد و در صورت نیاز نوارهای اسکرول را نشان می دهد، اما به طور پیش فرض آنها را پنهان می کند و مسئولیت پیمایش را به کاربر و مرورگر می دهد.

اسکرول و سرریز

بسیاری از این رفتارهای overflow یک نوار اسکرول را معرفی می‌کنند، اما چند رفتار و ویژگی اسکرول خاص وجود دارد که می‌تواند به شما در کنترل اسکرول روی ظرف سرریز کمک کند.

پیمایش و دسترسی

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

برای اجازه دادن به کادر پیمایش برای پذیرش فوکوس، tabindex="0" ، نامی با ویژگی aria-labelledby و یک ویژگی role مناسب اضافه کنید. به عنوان مثال:

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

سپس می‌توان از CSS برای نشان دادن فوکوس بودن کادر استفاده کرد، با استفاده از ویژگی outline برای ارائه یک سرنخ بصری که اکنون قابل پیمایش است.

در استفاده از CSS برای اجرای قابلیت دسترسی، آدریان روزلی نشان می دهد که چگونه CSS می تواند به جلوگیری از رگرسیون دسترسی کمک کند. به عنوان مثال، فقط در صورت استفاده از ویژگی های صحیح، پیمایش را روشن کنید و نشانگر فوکوس را اضافه کنید. قوانین زیر فقط در صورتی کادر را قابل پیمایش می‌کند که دارای ویژگی tabindex ، aria-labelledby و role باشد.

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

موقعیت اسکرول بار در مدل جعبه

نوارهای اسکرول فضایی را در جعبه بالشتک اشغال می‌کنند و می‌توانند برای فضا رقابت کنند، اگر inline و overlaid نگیرند. ماژول مدل جعبه این منبع بالقوه تغییر طرح را بیشتر گسترش می دهد.

Root-Scroller در مقابل Implicit-Scroller

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

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

اسکرول رفتار

scroll-behavior به شما امکان می دهد تا پیمایش عناصر را با کنترل مرورگر انتخاب کنید. این به شما امکان می‌دهد نحوه استفاده از پیمایش درون صفحه مانند .scrollTo() یا پیوندها را مشخص کنید.

این به ویژه هنگامی مفید است که با prefers-reduced-motion برای تعیین رفتار اسکرول بر اساس ترجیح کاربر استفاده شود.

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

overscroll-behavior

اگر تا به حال به پایان یک همپوشانی معین رسیده اید، سپس به پیمایش ادامه داده اید و صفحه پشت همپوشانی حرکت می کند، این زنجیره پیمایش یا حباب زدن به ظرف اسکرول والد است. ویژگی overscroll-behavior به شما امکان می دهد تا از نشت پیمایش سرریز به داخل یک ظرف والد (به نام زنجیره اسکرول) جلوگیری کنید.

درک خود را بررسی کنید

دانش خود را در مورد سرریز آزمایش کنید

منابع

سرریز و از دست دادن داده در CSS از مجله Smashing