آموزش overflow در CSS؛ مدیریت سرریز و اسکرول | درس 34 + پروژه درس

درس 34 از دوره آموزش HTML و CSS ارومیا دیزاین

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

پروژه و پاسخ تمرین: دانلود پروژه درس 34 (ZIP)؛ شامل HTML، CSS، پاسخ مستقل و راهنمای آزمایش با ماوس، لمس و صفحه کلید. فایل را استخراج و index.html را باز کنید؛ پروژه بدون اینترنت و نصب اجرا می شود.

سرریز محتوا چیست و چرا اتفاق می افتد؟

مرورگر معمولاً ارتفاع یک بخش را با مقدار متن افزایش می دهد. وقتی ارتفاع را محدود می کنیم یا یک جدول از عرض والد بزرگ تر است، بخشی از محتوا ممکن است بیرون محدوده قرار بگیرد. overflow تعیین می کند با همین بخش بیرونی چه کنیم؛ این ویژگی متن را کوتاه یا اندازه جدول را کوچک نمی کند. برای تشخیص محدوده محتوا، padding و border، درس مدل جعبه در CSS را مرور کنید.

.box {
  width: 280px;
  height: 120px;
  padding: 12px;
  border: 2px solid #075985;
  overflow: auto;
}

در نمونه بالا، ارتفاع محدود است و متن بلند فرصت سرریز پیدا می کند. اگر محدودیت ارتفاع را بردارید، کادر معمولاً بلندتر می شود و اسکرول عمودی لازم نیست. از height ثابت برای همه متن های صفحه استفاده نکنید؛ متن ترجمه شده، اندازه فونت بیشتر و بزرگ نمایی کاربر، فضای مورد نیاز را تغییر می دهند. انتخاب واحد را با درس واحدهای CSS هماهنگ کنید.

مقایسه پنج مقدار overflow در CSS

این جدول رفتار اصلی مقادیر را خلاصه می کند. ظاهر و زمان نمایش نوار اسکرول به مرورگر و تنظیمات سیستم عامل هم وابسته است؛ بعضی دستگاه ها نوار شناور را فقط هنگام حرکت نشان می دهند. بنابراین نبودن نوار دائمی به تنهایی ثابت نمی کند که کادر قابل اسکرول نیست.

visible؛ محتوا را بیرون کادر هم نشان بده

.box { overflow: visible; }

visible مقدار اولیه است. با این مقدار، محدود کردن ارتفاع لزوماً متن را داخل همان ارتفاع نگه نمی دارد؛ متن می تواند بیرون بزند و روی محتوای بعدی دیده شود. در پروژه، نمونه اول عمداً همین وضعیت را نشان می دهد. فاصله اضافی زیر آن فقط برای مقایسه آموزشی است؛ در طراحی واقعی، ابتدا بررسی کنید آیا اصلاً به ارتفاع ثابت نیاز دارید یا نه.

hidden و clip؛ دو نوع برش با تفاوت مهم

.cropped { overflow: hidden; }
.decorative { overflow: clip; }

هر دو مقدار بخش بیرونی را از دید پنهان می کنند، اما hidden یک کادر اسکرول می سازد که نوار قابل استفاده مستقیم ندارد. برنامه یا رفتن فوکوس به یک عنصر داخلی ممکن است آن را جابه جا کند. clip کادر اسکرول نمی سازد و جابه جایی برنامه ای را هم پشتیبانی نمی کند. برای پروژه این درس به جاوااسکریپت نیاز نداریم؛ این تفاوت را برای انتخاب درست مقدار می شناسیم.

از برش برای مخفی کردن توضیح ضروری، خطای فرم یا دکمه مهم استفاده نکنید. برش محتوا، مشکل اندازه گذاری را به خودی خود رفع نمی کند. همچنین hidden معمولاً یک زمینه قالب بندی بلوکی مستقل می سازد؛ clip به تنهایی این کار را انجام نمی دهد. بررسی جزئیات این زمینه به درس های چیدمان مربوط است؛ فعلاً hidden و clip را جایگزین کاملاً یکسان فرض نکنید.

auto و scroll؛ چه زمانی اسکرول ایجاد کنیم؟

.notes {
  max-height: 240px;
  overflow: auto;
}

.always-scroll {
  height: 120px;
  overflow: scroll;
}

برای کادر توضیحات، auto معمولاً رفتار مناسب تری دارد: متن کوتاه فضای اضافی نمی گیرد و متن بلند با اسکرول قابل خواندن می ماند. max-height سقف ارتفاع را تعیین می کند، اما مثل height کادر کوتاه را مجبور به همان ارتفاع نمی کند. scroll حتی بدون سرریز، رفتار کادر اسکرول را برقرار نگه می دارد؛ با این حال شکل نوار همچنان به دستگاه وابسته است.

در فایل پروژه یک متن یکسان را در هر پنج حالت قرار داده ایم. ابتدا کادر auto را تا انتها حرکت دهید؛ سپس متن آن را کوتاه کنید و صفحه را دوباره باز کنید. در این آزمایش می بینید که محتوا و محدودیت اندازه با هم نیاز به اسکرول را تعیین می کنند. اندازه فونت و فاصله سطرها هم بر ارتفاع لازم اثر دارند.

overflow-x و overflow-y؛ کنترل جداگانه دو محور

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.vertical-panel {
  max-height: 240px;
  overflow-y: auto;
}

محور x افقی و محور y عمودی است؛ فارسی بودن صفحه این دو محور را جابه جا نمی کند. برای جدول عریض، اسکرول افقی را روی قاب جدول تنظیم می کنیم. نکته مهم این است که دو محور همیشه مستقل محاسبه نمی شوند: اگر یکی auto یا scroll یا hidden باشد و دیگری visible بماند، visible در مقدار محاسبه شده می تواند به auto تبدیل شود. پس ترکیب محور افقی قابل اسکرول با محور عمودی کاملاً آزاد را بدون آزمایش فرض نکنید.

نوشتن دو مقدار در overflow هم ممکن است؛ مقدار اول برای x و مقدار دوم برای y است. در شروع، شکل جداگانه خواناتر است. اگر خروجی غیرمنتظره بود، در ابزار توسعه مرورگر، بخش Computed را ببینید تا مقدار نهایی هر محور را بررسی کنید؛ پنل Styles به تنهایی همیشه تفاوت مقدار نوشته شده و محاسبه شده را آشکار نمی کند.

پروژه کاربردی: جدول عریض بدون اسکرول کل صفحه

جدول را در یک div قرار می دهیم و اسکرول را به همان قاب می سپاریم. جدول همچنان ساختار واقعی table دارد؛ تبدیل ردیف ها به عناصر نامرتبط لازم نیست. اگر ساختار عنوان ستون و ردیف را فراموش کرده اید، درس جدول ها در HTML را مرور کنید.

<p id="table-help">برای دیدن همه ستون ها، جدول را افقی حرکت دهید.</p>
<div class="table-wrap" tabindex="0" role="region"
     aria-label="جدول برنامه دوره" aria-describedby="table-help">
  <table>
    <caption>برنامه یادگیری</caption>
    <!-- Add thead and tbody here -->
  </table>
</div>

.table-wrap { max-width: 100%; overflow-x: auto; }
.table-wrap table { width: 100%; min-width: 720px; border-collapse: collapse; }
.table-wrap:focus-visible { outline: 3px solid #b45309; outline-offset: 4px; }

در پروژه، جدول کامل با عنوان ها و چهار ردیف وجود دارد. عرض پنجره را کوچک کنید؛ ستون ها باید داخل قاب حرکت کنند و متن بیرون قاب ثابت بماند. min-width اینجا فقط برای ساخت نمونه عریض است، نه یک عدد مناسب برای همه جدول ها. اگر روی خود body سرریز را پنهان کنید، ممکن است بخشی از جدول را از دسترس خارج کنید؛ ابتدا عنصر بزرگ تر از صفحه را پیدا کنید.

اسکرول با صفحه کلید و فوکوس قابل مشاهده

کاربر باید بتواند بدون ماوس به ناحیه اسکرول برسد. برای سازگاری بیشتر میان مرورگرها، در نمونه های قابل اسکرول tabindex برابر صفر گذاشته ایم. نام روشن ناحیه با aria-label و توضیح کاربرد با aria-describedby به درک آن کمک می کنند. سپس با Tab به کادر برسید و کلیدهای جهت را امتحان کنید. به همه div های صفحه tabindex ندهید؛ فقط نواحی ضروری و قابل تعامل را وارد ترتیب فوکوس کنید.

خط دور فوکوس را حذف نکنید. در درس hover و focus-visible روش نمایش این نشانه را یاد گرفتیم. برای مرور اصول صفحه کلید نیز درس دسترس پذیری HTML را بخوانید. در نمونه hidden و clip محتوای تعاملی قرار نداده ایم تا دکمه یا لینک ضروری پشت برش پنهان نماند.

رشته بلند را بشکنیم یا کادر را اسکرول کنیم؟

.long-token {
  overflow-wrap: anywhere;
}

img {
  max-width: 100%;
  height: auto;
}

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

سه نقطه در انتهای عنوان تک خطی

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

text-overflow به تنهایی عنوان را کوتاه نمی کند. در این نمونه، nowrap جلوی رفتن به خط بعد را می گیرد و hidden بخش اضافی را می برد؛ ellipsis نشانه سه نقطه را اضافه می کند. عنصر باید عرض محدود داشته باشد؛ عرض موجود در والد هم می تواند این محدودیت را بسازد. برای عنوان ضروری، امکان خواندن نسخه کامل را در طراحی فراهم کنید. اتکا به سه نقطه یا راهنمایی که فقط با نگه داشتن ماوس دیده می شود، برای همه کاربران کافی نیست.

عیب یابی مرحله به مرحله

اول مشخص کنید سرریز از متن است، تصویر است یا جدول. سپس عرض، ارتفاع، padding و border والد و فرزند را در Inspect بررسی کنید. اگر کادر از والد بزرگ تر است، پیش از برش دادن، اندازه گذاری را اصلاح کنید. نوع نمایش عنصر نیز روی رفتار اندازه اثر دارد. اگر قانون جدید اجرا نشد، در آبشار و اولویت CSS دنبال قانون غالب بگردید.

در چیدمان های Flex و Grid، حداقل اندازه خودکار بعضی فرزندان هم می تواند مانع کوچک شدن شود؛ در درس های همان چیدمان ها سراغ min-width و min-height می رویم. در این مرحله، از افزودن overflow: hidden به کل صفحه به عنوان درمان عمومی استفاده نکنید. حذف نشانه سرریز، دلیل بزرگ بودن یک عنصر را روشن نمی کند و ممکن است اطلاعات را پنهان کند.

تمرین مستقل و پاسخ درس 34

در بخش exercise پروژه، متن از سقف ارتفاع کادر بیشتر است. فقط با یک قانون CSS امکان خواندن تمام متن را ایجاد کنید؛ سپس نصف متن را حذف کنید و رفتار کادر کوتاه را بررسی کنید. بعد عرض پنجره را کم کنید و جدول را با صفحه کلید و لمس آزمایش کنید. پاسخ اصلی زیر است؛ تلاش کنید پیش از خواندن آن، تفاوت auto با hidden را توضیح دهید.

.exercise {
  overflow: auto;
}

فایل solution.css داخل ZIP پاسخ را دارد و از ابتدا فعال نیست. برای مقایسه، لینک زیر را بعد از style.css در head اضافه کنید. نسخه پاسخ نباید متن تمرین را حذف کند و باید ادامه آن را با اسکرول در دسترس بگذارد.

<link rel="stylesheet" href="solution.css">

دانلود پروژه، پاسخ تمرین و راهنمای درس 34

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

چرا overflow: auto اسکرول عمودی ایجاد نمی کند؟

ممکن است ارتفاع کادر محدود نباشد یا متن از ارتفاع موجود بیشتر نباشد. مقدار نهایی height و max-height را بررسی کنید.

آیا hidden متن را از HTML حذف می کند؟

خیر؛ فقط نمایش بخش بیرونی را محدود می کند. این ویژگی ابزار کنترل دسترسی یا حذف اطلاعات نیست.

آیا scroll همیشه نوار دائمی نشان می دهد؟

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

برای جدول موبایل از کدام مقدار استفاده کنیم؟

در نمونه این درس، overflow-x: auto را روی قاب جدول می گذاریم تا حرکت افقی به همان ناحیه محدود شود.

آیا ZIP پاسخ تمرین هم دارد؟

بله؛ HTML، CSS اصلی، فایل solution.css و راهنمای اجرای آفلاین داخل فایل هستند.

درس بعدی دوره

اکنون می توانید محتوای بلند را حفظ کنید و رفتار سرریز هر کادر را آگاهانه تنظیم کنید. در درس 35؛ چیدمان منو، کارت و بخش های صفحه با Flexbox، اندازه و تراز عناصر را با پروژه عملی بررسی می کنیم.

منابع تکمیلی: مستند overflow در MDN و مستند overflow-wrap در MDN.