مشکلات سرریز در CSS – مجله سر و صدا

درباره نویسنده

Ahmad Shadeed یک طراح UX و توسعه دهنده جلویی از فلسطین است. او از کار در پروژه های چالش برانگیز طراحی و پروژه های جلویی لذت می برد. او نوشت a
اطلاعات بیشتر در مورد احمد

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

مسئله سرریز چیست؟

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

این می تواند به دلیل محتوای گسترده غیرمنتظره یا یک عنصر با عرض ثابت که عرض آن از نمای دید گسترده تر است ، رخ دهد. ما در این مقاله به بررسی همه علل خواهیم پرداخت.

چگونه می توان نقطه سرریز را مشاهده کرد

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

بیایید راه های تشخیص سرریز را بررسی کنیم.

پیمایش به چپ یا راست

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

استفاده از جاوا اسکریپت برای یافتن عناصر گسترده تر از بدن

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

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

رئوس مطالب CSS برای نجات

اعمال CSS outline به همه عناصر موجود در صفحه اشاره ای در مورد عناصری می کند که فراتر از عناصر صفحه هستند body.

* {
    outline: solid 1px red;
}

حتی بهتر ، ادی عثمانی فیلمنامه دارد که با هر رنگ تصادفی یک طرح کلی به هر عنصر در صفحه اضافه می کند.

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1

برچسب سرریز در فایرفاکس

Firefox یک ویژگی مفید دارد که به شما می گوید کدام عناصر باعث سرریز شدن می شوند. امیدوارم مرورگرهای دیگر این مورد را اضافه کنند!

در حال حذف عناصر صفحه

روش معمول دیگر این است که DevTools مرورگر را باز کنید و یکی یکی عناصر را حذف کنید. پس از ناپدید شدن این مشکل ، احتمالاً بخشی که اخیراً حذف کرده اید دلیل آن است. به نظر من این روش در مواردی که مسئله را شناسایی کرده اید مفید است اما نمی دانید چرا این اتفاق می افتد مفید است.

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

مسائل مشترک سرریز

عناصر با عرض ثابت

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

.element {
    /* Don’t do this */
    width: 400px;
}

استفاده از Flexbox بدون بسته بندی

به همان اندازه که Flexbox مفید است ، اجازه ندهید که موارد در یک فضای جدید قرار بگیرند درصورت عدم وجود فضای خالی خطرناک است.

.parent {
    display: flex;
}

در اینجا ، موارد منعطف ممکن است باعث سرریز افقی شود در صورتی که فضا برای جا دادن همه آنها در یک خط کافی نباشد:

حتما استفاده کنید flex-wrap: wrap وقتی قرار است والد flex در اندازه های مختلف viewport کار کند.

.parent {
    display: flex;
    /* Do this */
    flex-wrap: wrap;
}

شبکه CSS

هنگامی که از شبکه CSS استفاده می کنید ، طراحی پاسخگو مهم است. از شبکه زیر استفاده کنید:

.wrapper {
    display: grid;
    grid-template-columns: 1fr 300px 1fr;
    grid-gap: 1rem;
}

مثال بالا عالی کار می کند مگر اینکه نمای نمایش از 300 پیکسل باریک باشد. اگر چنین باشد ، پس سرریز اتفاق می افتد.

برای جلوگیری از چنین مسئله ای ، فقط در صورت وجود فضای کافی از شبکه استفاده کنید. ما می توانیم از یک پرس و جو رسانه CSS مانند این استفاده کنیم:

.wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
}

@media (min-width: 400px) {
    .wrapper {
        grid-template-columns: 1fr 300px 1fr;
    }
}

کلمات طولانی

یکی دیگر از دلایل شایع سرریز ، کلمه ای طولانی است که در منظره نمایش نمی گنجد. این اتفاق بیشتر در تلفن همراه می افتد ، به دلیل عرض ویورپت.

برای رفع این مشکل ، ما باید از overflow-wrap ویژگی.

.article-content p {
  overflow-wrap: break-word;
}

من یک مقاله مفصل در مورد مدیریت محتوای کوتاه و بلند با CSS.

این رفع به ویژه برای محتوای تولید شده توسط کاربر بسیار مفید است. یک مثال عالی برای این موضوع نظرات است. یک کاربر ممکن است یک URL طولانی را در نظر خود جایگذاری کند ، و باید با این آدرس کار شود overflow-wrap ویژگی.

حداقل اندازه محتوا در CSS Flexbox

دلیل جالب دیگر سرریز حداقل اندازه محتوا در Flexbox است. این یعنی چی؟

بر اساس مشخصات:

“به طور پیش فرض ، موارد فلکس کمتر از حداقل اندازه محتوای آنها (طول طولانی ترین کلمه یا عنصر با اندازه ثابت) کوچک نمی شوند. برای تغییر این ، تنظیم کنید min-width یا min-height ویژگی.”

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

برای رفع این مشکل ، می توانیم از an استفاده کنیم overflow ارزشی غیر از visible، یا می توانیم تنظیم کنیم min-width: 0 روی مورد فلکس

.card__name {
    min-width: 0;
    overflow-wrap: break-word;
}

حداقل اندازه محتوا در شبکه CSS

همانند Flexbox ، ما با CSS Grid همان مفهوم حداقل اندازه محتوا را داریم. با این حال ، راه حل کمی متفاوت است. CSS-Tricks از آن به عنوان “انفجار شبکه“

بیایید موضوع را بررسی کنیم. فرض کنید ما یک لفافه داریم که دارای یک کناره و یک قسمت اصلی است که با شبکه CSS چیده شده است.

.wrapper {
    display: grid;
    grid-template-columns: 248px 1fr;
    grid-gap: 40px;
}

همچنین ، ما یک بخش پیمایش در بخش اصلی داریم که من برای آن از flexbox استفاده کرده ام.

.section {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
}

توجه کنید که اضافه نکردم flex-wrap، زیرا می خواهم موارد فلکس در یک راستا قرار بگیرند. اما این کار نکرد ، و باعث سرریز افقی می شود.

برای رفع این مشکل ، باید استفاده کنیم minmax() بجای 1fr. به این ترتیب ، حداقل اندازه محتوای عنصر اصلی نخواهد بود auto.

.wrapper {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  grid-gap: 40px;
}

حاشیه های منفی

عنصری که خارج از صفحه قرار دارد می تواند باعث سرریز شود. معمولاً به این دلیل است که عنصر حاشیه منفی دارد.

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

.element {
    position: absolute;
    right: -100px;
}

جالب اینجاست که وقتی عنصر در طرف مقابل قرار بگیرد ، هیچ سرریز وجود ندارد. چرا؟

من اخیراً با این مسئله روبرو شدم و در مورد آن نوشت. معلوم می شود که این رفتار عمدی است. بر اساس مشخصات CSS:

“UA ها باید قسمت سرریز قابل پیمایش ظروف پیمایش را در دو طرف بلوک شروع و درون خطی جعبه جدا کنند (بنابراین رفتار می کنند مثل اینکه در آن طرف سرریز اسکرول پذیر نیستند).”

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

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

تصاویر بدون max-width

اگر پیش از موعد از تصاویر بزرگ مراقبت نکنید ، شاهد سرریز شدن خواهید بود. حتما تنظیم کنید max-width: 100% روی همه تصاویر

img {
    max-width: 100%;
}

واحدهای Viewport

استفاده كردن 100vw دارای یک نقطه ضعف است ، این است که می تواند باعث ایجاد سرریز در هنگام مشاهده نوار پیمایش شود. در macOS ، 100vw خوب است و باعث پیمایش افقی نمی شود.

در ویندوز ، نوارهای پیمایش به طور پیش فرض همیشه قابل مشاهده هستند ، بنابراین سرریز اتفاق می افتد.

دلیل این امر این است که با مقدار 100vw، هیچ آگاهی از وجود ندارد عرض نوار پیمایشی عمودی مرورگر. در نتیجه ، width برابر خواهد بود 100vw به علاوه عرض نوار پیمایشی. متأسفانه ، هیچ راه حل CSS برای آن وجود ندارد.

با این حال ، ما می توانیم از JavaScript استفاده کنید برای اندازه گیری عرض ویوپورت به استثنای نوار پیمایش.

function handleFullWidthSizing() {
  const scrollbarWidth = window.innerWidth - document.body.clientWidth

  document.querySelector('myElement').style.width = `calc(100vw - ${scrollbarWidth}px)`
}

تبلیغات تزریق شده

تزریق تبلیغات در بارگذاری صفحه در صورتی که از والدین گسترده تر باشد ، می تواند باعث سرریز شدن شود. اضافه کردن overflow-x: hidden به عنصر پدر و مادر برای جلوگیری از این.

هر آگهی موجود در وب سایت را دوباره بررسی کنید تا مطمئن شوید که باعث سرریز شدن آن نمی شود.

اعمال می شود overflow-x: hidden به body یک ایده خوب؟

انتخاب برای overflow-x: hidden مانند قرار دادن یک باند بدون پرداختن به مشکل است. اگر سرریز شدید ، بهتر است مسئله اصلی را حل کنید.

علاوه بر این ، درخواست overflow-x: hidden به body عنصر ایده خوبی نیست زیرا position: sticky اگر والدین این کار را انجام دهند کار نمی کند overflow-x: hidden.

نحوه جلوگیری از سرریز در CSS

در زیر مواردی وجود دارد که می توانید برای کاهش مشکلات سرریز در CSS بررسی کنید. امیدوارم برایتان مفید بوده باشد!

تست با محتوای واقعی

هیچ چیزی با محتوای واقعی یک وب سایت تست نمی کند. با این کار ، اطمینان حاصل می کنید که طرح می تواند انواع مختلف محتوا را کنترل کند.

حساب برای محتوای تولید شده توسط کاربر

برای م componentلفه ای مانند موضوع نظرات ، مواردی را در نظر بگیرید که کاربر یک URL طولانی را جایگذاری می کند یا یک کلمه طولانی را تایپ می کند ، همانطور که در بالا توضیح داده شد.

با دقت از CSS Grid و Flexbox استفاده کنید

همانطور که از شبکه CSS و flexbox سودمند است ، در صورت استفاده نادرست به راحتی می تواند باعث سرریز شود. همانطور که بحث کردیم ، استفاده نکردن است flex-wrap: wrap همانطور که می تواند باعث سرریز شود grid-template-columns: 1fr 350px وقتی صفحه باریکتر از 350 پیکسل است.

بیشتر خواندن در SmashingMag:

(vf ، il ، al)