سرریز

پادکست 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;
}

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

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

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

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

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

سبک کردن نوار پیمایش

می‌توانید به نوار اسکرول خود سبک دهید تا آن را در طراحی سایت خود بگنجانید. scrollbar-color رنگ انگشت شست و ناودان نوار پیمایش را تعیین می کند.

برای تغییر عرض نوار پیمایش، از scrollbar-width استفاده کنید. نمی‌توانید این را روی یک طول دلخواه تنظیم کنید، اما می‌توانید تعیین کنید که یک نوار پیمایش thin می‌خواهید یا none .

اسکرول رفتار

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

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

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

overscroll-behavior

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

اسکرول کردن

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

تنظیم محفظه اسکرول

برای فعال کردن اسکرول snapping، scroll-snap-type به محفظه اسکرول اضافه کنید. ابتدا مشخص می کنید که اسکرول در کدام محور قرار می گیرد. این می تواند یک ویژگی منطقی ( block یا inline )، یک ویژگی فیزیکی ( x یا y ) یا both باشد.

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

.scroll-container {
    scroll-snap-type: block mandatory;
}

Scroll Snapping یک عنصر را در محدوده کامل محفظه اسکرول تراز می کند، اما اگر بخشی از محفظه اسکرول قابل مشاهده نباشد چه اتفاقی می افتد؟ برای مثال، ممکن است یک هدر ثابت داشته باشید که بخشی از ظرف اسکرول را پوشانده است. برای کمک به تراز کردن عناصر قطع شده با بخش قابل مشاهده محفظه پیمایش، می توانید scroll-padding تنظیم کنید.

کنترل عناصر قابل چفت شدن

برای اینکه یک عنصر قابل جابجایی باشد، ویژگی scroll-snap-align برای start ، end یا center تنظیم کنید. اگر جهت اسکرول both باشد، می توانید دو مقدار تنظیم کنید. این تنظیم می کند که آیا یک یال عنصر با لبه اسکرولپورت تراز شود یا در مرکز قرار گیرد.

می‌توانید فاصله اطراف لبه‌های عنصر قطع شده را با scroll-margin تنظیم کنید:

scroll-margin همچنین برای تنظیم padding هنگام پیمایش به یک عنصر استفاده می شود:

برای چسبندگی بیشتر پیمایش، می‌توانید scroll-snap-stop: always را به یک مورد در یک محفظه اسکرول اضافه کنید. این مانع از پیمایش چندین مورد در یک پیمایش نمی شود. اگر یک حرکت پیمایشی را به گونه‌ای پایان دهید که پیمایش با اینرسی ادامه یابد، اسکرول به جای ادامه دادن به گذشته، در موقعیت ضربه‌ای بعدی به پایان می‌رسد.

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

منابع

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