ویژگی overflow تعیین می کند که محتوایی که از مرزهای عنصر خارج می شود, نمایش داده شود یا نه. و همچنین چگونگی نمایش را نیز تعیین می کند.
فقط عناصری که از نوع بلاک هستند محتوایشان سر ریز می شود.
این ویژگی مقادیر زیر را می پذیرد:
overflow: visible; /* مقدار پیشفرض */
overflow: hidden;
overflow: scroll;
overflow: auto;
overflow: inherit;
در حالت عادی اگر عنصری عرض و ارتفاع ثابت نداشته باشد با افزایش و بزرگ شدن محتوای آن, عنصر نیز در دو جهت ارتفاع و عرض گسترش پیدا می کند. در این حالت محتوای عنصر دچار سرریز نخواهد شد.
اما اگر در جهتی (چه افقی, چه عمودی و چه هردو) اندازه عنصر ثابت باشد, آن زمان اگر محتوای عنصر بیشتر از فضای آن باشد, محتوا دچار سرریز می شود.
تعیین ارتفاع و عرض ثابت می تواند از طریق ویژگی های height و width تعیین شود و همچنین می تواند با استفاده از position و تعیین مختصات برای عنصر انجام شود.
visible: این مقدار برای ویژگی overflow که مقدار پیشفرض است باعث می شود تا محتوای سرریز شده, نمایش داده شود.
hidden: اگر این مقدار تعیین شود محتوای سرریز شده نمایش داده نمی شود.
scroll: این مقدار باعث می شود تا برای عنصر اسکرول رسم شود تا محتوا داخل عنصر اسکرول شود.
auto: زمانی که از مقدار scroll استفاده شود حتما اسکرول روی عنصر رسم می شود چه محتوا سرریز کند چه نکند. اما اگر نیاز دارید که قبل از سرریز اسکرول نباشد و زمانی که سرریز صورت گرفت اسکرول ظاهر شود, جواب نیاز شما مقدار auto می باشد.
در تصویر زیر عنصری نمایش داده شده است که مقادیر ثابت برای عرض و ارتفاع آن تعیین شده است:
در مثال بالا فقط از متن به عنوان محتوا استفاده شده است و بصورت پیشفرض زمانی که عرض ثابت باشد متن به خط بعد می شکند و سرریز افقی صورت نمی گیرد. اما اگر محتوا چیزی مثل تصویر باشد قصه فرق می کند:
تنها جایی که این ویژگی تاثیری ندارد زمانی است که محتوا یا فرزندان عنصر دارای position از نوع fixed باشند. همینطور اگر فرزندان نسبت به عنصری غیر از پدرشان absolute شوند نیز overflow تاثیری روی آنها نخواهد داشت.
اگر می خواهید در +iOS 5 طرح اسکرول خود سیستم عامل را داشته باشید باید بصورت زیر عمل کنید:
div {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
در دموی زیر با تغییر مقادیر و بررسی مثال ها به درک بهتر مطلب کمک کنید:
See the Pen overflow by Mojtaba Seyedi (@seyedi) on CodePen.
پشتیبانی مرورگر ها
ویژگی overflow در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, سافاری, اپرا, اینترنت اکسپلورر و iOS پشتیبانی می شود. در اندروید اطلاعات پیشتیبانی این ویژگی ناشناخته است!
خییلی ممنون :)
سلام خدا قوت
از این مطلب خوبتون تشکر میکنم . موفق باشید
scroll با auto چه فرقی میکننه ؟
دوست من متن کامل بخون متوجه میشی
با سلام و سپاس برای این آموزش جذاب و با دقت به جزئیات
به نظرم جا داره به نحوه استفاده از سرریزها overflow در flexbox هم اشاره می کردین و روشش رو توضیح می دادین، چون ی مشکلاتی داره در حالت عادی و درست کار نمی کنه انگار. ی مقداردهی های خاصی رو انگار می خوادش.
سلام سایتتون فوق العاده کامله ممنون از زحمت فراوانی که برای جامعه برنامه نویس ها کشیدید….
سلام خسته نباشد. سایتتون خیلی اتفاق خوبی است، تقریبا میشه به جای w3schools در css از سایتتون استفاده کرد اگر بتونید مثال ها و توضیحات بیشتری بزارید خیلی بهتر میشه.
وقتی یک المنت overflow میکنه مثلا به صورت عمودی، در اینصورت به همون مقدار فضا رو هم اشغال میکنه؟ یعنی المنت ها را به سوی پایین هل میده؟
سلام، نه
سلام یه مقدار جدید هم بهش اضافه شده این مقدار چکار میکنه ؟؟
overflow: overlay
سلام میشه بگید چرا روی position:fixed کار نمیکنه؟! اگه میتونید یک مثال معرفی کنید.
https://getbootstrap.com/docs/4.4/getting-started/introduction/ <— منوی سمت چپ این پیج رو ببینید با اینکه position:fixed هست ولی باز وقتی صفحه رو کوچیک میکنیم scroll روش تاثیر میگذاره، حتی روی مثال خودتونhttps://codepen.io/seyedi/pen/reqoJz/?editors=1100 هم امتحان کردم باز تاثیر میگرفت دقیقا متوجه نشدم منظورتون چی بود
لطفا اگه میتونید بیشتر توضیح بدید که چرا روی fixed تاثیر نمیپذیره اصلا متوجه نشدم چرا یا حداقل لینکی معرفی کنید که مطالعه کنم.
باتشکر
سلام، خود عنصر نه، وقتی بچه هاش پوزشین فیکس داشته باشند، اون بچه ها طبیعتا میپرن بیرون و اهمیتی به مخفی کاری پدرشون نمیدن :)
بچه هاش، نه خود عنصر.
یعنی عنصر ما overflow داره، و بچه‌ش position از نوع fix داره.
با سلام .
” همینطور اگر فرزندان نسبت به عنصری غیر از پدرشان absolute شوند نیز overflow تاثیری روی آنها نخواهد داشت. ”
این قسمت منظور از غیر از پدرشان چیه آیا پدربزرگ رو هم در بر میگیره .
لطفا این مثال رو ببینین .
https://codepen.io/Yazdan1234/pen/ZEWPeYE
سایتتون واقعا عالیه،تبریک میگم
سلام وقت بخیر. یک سوالی از خدمتتون داشتم. چرا در طراحی منوی افقی وقتی از float استفاده میکنیم همه چیز ناپدید میشه و با استفاده از hidden overflow منو پیدا میشه؟ منظورم اینه که با تعریف hidden مغایرت داره.
سلام
وقتی به بچه ها float میدیم پدر دیگه ارتفاع بچه ها رو نادیده میگیره و انگار هیچی داخلش نباشه و محو میشه اما اگر برای پدر ارتفاع تعیین کنید مجدد نمایش داده میشه.
حالا برای منم این سواله که overflow:hiden چطور قضیه را درست میکنه
به نظر میرسه که overflow:hiden دوتا کار رو همزمان انجام میده :
1- محتوای خارج از تگ را برش زده مانع نمایش آن میشود
2- تگ را مجبور میکند محتوای داخل خودش را نمایش دهد که باعث ظاهر شدن تگ والد میشود.
نظر شما چیه؟
سلام وقت بخیر
عکسهایی که تو اسلایدر گذاشتم به اضافه عکسهایی که تو صفحات دیگه سایت هست تو موبایل کامل نشون داده نمیشه یعنی مثلا نصف عکس دیده نمیشه لطف میکنید قطعه کدی که باید تو قسمت css اضافی بزارم تا درست بشه رو بهم بگید ممنون
با سلام
من بیش از یک سال هست که w3school رو میخونم اونجا متوسط هست. به نظرم سایت شما حداقل یک لول پیشرفته تر و دقیق تر است. فقط اونجا ادیتور آنلاین هست که اگر سما داشتید بینظیر بودید.