CSS overflow: sig'magan kontent va skroll konteynerlar

Qisqacha: Kontent qutiga sig'masa, brauzer uni kesmaydi — qutidan tashqariga chiqarib chizadi (overflow: visible). overflow: hidden va clip ortiqchasini kesadi, auto esa kerak bo'lganda skrollbar qo'shadi. hidden, scroll va auto elementni skroll konteynerga aylantiradi: ichidagi kontent surilishi mumkin. Bir qatorli matnni "…" bilan qisqartirish uchun uchta shart kerak: white-space: nowrap, overflow: hidden va cheklangan en — keyin text-overflow: ellipsis.

Bu darsda

• overflow ning beshta qiymatini farqlaysiz va har biri qachon kerakligini aytasiz.
• Keng jadval va uzun pre uchun skroll o'ramini klaviatura bilan ham ishlaydigan qilib yozasiz.
• Matnni bir qatorda "…" bilan va bir necha qatorda -webkit-line-clamp bilan qisqartirasiz.
• Skrollbar joyini scrollbar-gutter bilan saqlaysiz, rangini standart yo'l bilan berasiz.
• overflow-x: hidden ning yashirin tuzog'ini va body dagi "yamoq" nega yomonligini tushuntirasiz.

Oldin bilishingiz kerak: O'lchamlar: width, height, min va max, Accessible va responsive jadvallar, Viewport birliklari, Holat pseudo-klasslari.

1. Nega bu kerak?

O'lchamlar darsida maslahat bor edi: blokka qat'iy balandlik bermang. Lekin Jasur aka menyuda hamma kartalar bir xil baland bo'lishini xohlaydi. Stajyor kartalarga height: 6rem yozdi. Lag'mon tavsifi esa uzunroq chiqdi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  .taom-karta {
    width: 220px;
    height: 6rem;
    margin-bottom: 8px;
    padding: 0 12px;
    border: 2px solid var(--rang-asosiy);
    background-color: var(--rang-fon);
  }
</style>
<article class="taom-karta">
  <h3>Lag'mon</h3>
  <p>Qo'lda cho'zilgan xamir, mol go'shti, bulg'or qalampiri
  va maxsus ziravorlar. Achchiqligini o'zingiz tanlaysiz.
  Porsiya — 28 000 so'm.</p>
</article>
<article class="taom-karta">
  <h3>Osh</h3>
  <p>Toshkent oshi, bedana tuxumi bilan.</p>
</article>

Nimaga qarang: lag'mon tavsifi kartaning pastki chegarasidan chiqib ketdi va ikkinchi kartaning ichiga, "Osh" sarlavhasi ustiga yozildi. Brauzer sig'magan kontentni kesmaydi — uni qutidan tashqariga chiqarib chizadi.

Eng yaxshi yo'l — kontentga joy berish: height o'rniga min-height. Lekin ba'zan joy haqiqatan cheklangan: keng jadval telefonga sig'maydi, chekdagi uzun qator ekrandan chiqadi, taom nomi kartaga sig'maydi. Sig'magan qismni ko'rsatamizmi, kesamizmi, surib ko'rsatamizmi yoki "…" bilan qisqartiramizmi? Bu savolga overflow xususiyati javob beradi.

2. overflow qiymatlari

2.1 visible — standart holat

Toshish (overflow) — kontent o'z qutisidan katta bo'lib qolgan holat. overflow xususiyati shu holatda ortiqcha qism bilan nima qilishni aytadi. Boshlang'ich qiymati — visible: ortiqcha qism ko'rinib turadi, qutidan tashqarida. Yuqoridagi natija aynan shu edi.

Muhim nuqta: toshgan kontent joy egallamaydi. Ikkinchi karta birinchisining balandligiga qarab joylashdi — 6rem ga. Undan chiqib ketgan matnni brauzer "yo'q" deb hisobladi, shuning uchun matnlar ustma-ust tushdi.

2.2 Kesish yoki surish

Qolgan to'rt qiymat:

• hidden — ortiqcha qism kesiladi. Skrollbar yo'q, lekin kontent ichkarida "surilishi" mumkin — buni pastroqda ko'ramiz.
• clip — ortiqcha qism kesiladi va umuman surilmaydi. Qat'iy qirqish.
• scroll — doim skrollbar ko'rsatadi, kontent sig'sa ham.
• auto — skrollbar faqat kontent sig'maganda chiqadi.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  p {
    width: 220px;
    height: 2.5em;
    margin: 0 0 12px;
    padding: 4px 8px;
    border: 2px solid var(--rang-asosiy);
  }
  .kesish { overflow: hidden; }
  .qirqish { overflow: clip; }
  .surish { overflow: auto; }
</style>
<p class="kesish"><b>hidden:</b> Qo'lda cho'zilgan xamir,
mol go'shti, bulg'or qalampiri va maxsus ziravorlar.</p>
<p class="qirqish"><b>clip:</b> Qo'lda cho'zilgan xamir,
mol go'shti, bulg'or qalampiri va maxsus ziravorlar.</p>
<p class="surish"><b>auto:</b> Qo'lda cho'zilgan xamir,
mol go'shti, bulg'or qalampiri va maxsus ziravorlar.</p>

Nimaga qarang: uchala qutida ham matn chegaradan chiqmaydi. hidden va clip ko'rinishda bir xil — pastki qatorlar shunchaki kesildi. auto qutisida esa tik skrollbar paydo bo'ldi, matnni surib o'qish mumkin. Telefonda va macOS'da skrollbar surilgandagina ko'rinadi (Viewport birliklari darsidagi farq).

scroll va auto farqi Windows'da ko'rinadi: scroll kontent sig'sa ham bo'sh skrollbar chizadi — ham tik, ham gorizontal. Deyarli har doim auto kerak.

2.3 Skroll konteyner

hidden, scroll yoki auto berilgan element skroll konteyner (scroll container) ga aylanadi — o'z kontentini o'z "oynasi"dan ko'rsatadigan quti. Choyxona devoridagi derazani tasavvur qiling: deraza kichik, hovli katta. Derazadan hovlining bir bo'lagini ko'rasiz, boshingizni bursangiz — boshqa bo'lagini. Brauzer oynasi — eng katta deraza, overflow: auto esa sahifa ichida yana bitta kichik deraza ochadi.

clip skroll konteyner yaratmaydi. Bu uning hidden dan asosiy farqi.

2.4 hidden baribir suriladi

"Skrollbarsiz skroll konteyner" g'alati tuyuladi. hidden qutini sichqoncha g'ildiragi surmaydi, lekin boshqa yo'llar suradi. Chrome'da tekshirdik: hidden qutining kesilgan qismida havola bor edi. Tab bilan unga o'tganimizda quti o'zi surildi — brauzer fokusdagi elementni ko'rsatishga harakat qildi. JavaScript ham hidden qutini sura oladi. clip qutida esa fokus havolaga tushdi, lekin quti qimirlamadi — havola ko'rinmay qoldi.

Qoida: kesilgan qismda bosiladigan narsa bo'lmasin. Bo'lsa — bu dizayn xatosi, uni hidden ham, clip ham to'g'ri hal qilmaydi.

2.5 Ikki o'q: overflow-x va overflow-y

overflow — qisqa yozuv. U ikki to'liq yozuvni birlashtiradi: overflow-x (gorizontal, chapdan o'ngga) va overflow-y (vertikal, tepadan pastga). Ikki qiymat yozsangiz, birinchisi — x, ikkinchisi — y: overflow: hidden auto.

Bitta tuzoq bor. Chrome'da tekshirdik: overflow-x: hidden yozganda overflow-y visible bo'lib qolmadi — DevTools Computed'da u auto ga aylandi. Qoida shunday: bir o'q kesilsa yoki surilsa, ikkinchi o'q visible bo'la olmaydi. Brauzer uni o'zi auto qiladi. Faqat clip bu qoidadan ozod: overflow-x: clip da overflow-y visible bo'lib qoladi.

Qachon muhim? Kartada o'ngga chiqib ketadigan bezak chiziq bor, uni kesmoqchisiz. Tepada esa "Yangi!" belgisi karta chegarasidan chiqib turibdi va u ko'rinishi kerak:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-fon: #fffaf0;
  }
  .taom-karta {
    width: 220px;
    margin: 2rem 0 1rem;
    padding: 0 12px;
    border: 2px solid var(--rang-asosiy);
  }
  .taom-karta.yangi::before {
    content: "Yangi!";
    display: block;
    width: fit-content;
    margin-top: -0.8em;
    padding: 0 6px;
    background-color: var(--rang-urgu);
    color: var(--rang-fon);
  }
  .lenta {
    width: 300px;
    height: 6px;
    background-color: var(--rang-asosiy);
  }
  .birinchi { overflow-x: hidden; }
  .ikkinchi { overflow-x: clip; }
</style>
<article class="taom-karta yangi birinchi">
  <h3>Manti (hidden)</h3>
  <div class="lenta"></div>
</article>
<article class="taom-karta yangi ikkinchi">
  <h3>Manti (clip)</h3>
  <div class="lenta"></div>
</article>

Nimaga qarang: ikkala kartada ham yashil lenta o'ng chegarada kesildi — buni xohlagan edik. Lekin birinchi kartada "Yangi!" belgisining yuqori qismi ham kesildi. Sababi — overflow-y jimgina auto ga aylangan va tepadagi ortiqchani ham kesgan. Ikkinchi kartada (clip) belgi to'liq ko'rinadi. Belgi — yangi taom kartasining ::before pseudo-elementi (Pseudo-elementlar), uni chegaradan tepaga manfiy margin chiqardi (Margin sirlari). birinchi va ikkinchi — faqat shu taqqoslash uchun nomlar.

Tekshirib ko'ring: overflow: clip auto yozildi. Gorizontal o'qda nima bo'ladi, vertikal o'qda-chi?

3. Skroll o'ramlari

3.1 .jadval-orami — va'da bajarildi

Accessible va responsive jadvallar darsida keng jadvalni div class="jadval-orami" ga o'ragan edik. O'shanda "overflow-x: auto qoidasini Overflow darsida to'liq ochamiz" degan edik. Mana to'liq ko'rinishi. Natijani telefon enida (360) oching:

<style>
  :root {
    --rang-asosiy-toq: #1a5d1a;
  }
  .jadval-orami {
    overflow-x: auto;
  }
  .jadval-orami:focus-visible {
    outline: 3px solid var(--rang-asosiy-toq);
    outline-offset: 2px;
  }
  .jadval-orami table {
    min-width: 32rem;
  }
  th,
  td {
    padding: 4px 8px;
    text-align: left;
  }
</style>
<div class="jadval-orami" role="region"
     aria-labelledby="kompleks-nomi" tabindex="0">
  <table>
    <caption id="kompleks-nomi">Kompleks ovqat narxlari</caption>
    <tr>
      <th scope="col">Kun</th>
      <th scope="col">Tushlik</th>
      <th scope="col">Narxi</th>
      <th scope="col">Kechki ovqat</th>
      <th scope="col">Narxi</th>
    </tr>
    <tr>
      <th scope="row">Dushanba</th>
      <td>Osh, salat</td>
      <td>40 000</td>
      <td>Lag'mon, choy</td>
      <td>33 000</td>
    </tr>
  </table>
</div>

Nimaga qarang: telefon enida sahifa emas, faqat jadval chapga-o'ngga suriladi. Kompyuter enida jadval sig'adi va skrollbar yo'q — auto shuning uchun tanlangan.

Uch qatorning har biri kerak:

• overflow-x: auto — o'ramni gorizontal skroll konteynerga aylantiradi. Vertikal yo'nalishda jadval o'zi o'sadi.
• min-width: 32rem jadvalga. Jadval o'zi ham torayishni biladi: usiz brauzer ustunlarni siqib, so'zlarni ikki qatorga bo'lardi (jadvallar darsidagi muammo). min-width "bundan torayma, sig'masang — o'ram sursin" deydi.
• :focus-visible — Holat pseudo-klasslari darsidagi halqa. Bobur Tab bosib o'ramga tushganda qayerda turganini ko'radi va strelkalar bilan jadvalni suradi.

Chrome'da tekshirdik: tabindex siz ham Tab o'ramga to'xtadi — yangi Chrome ichida fokuslanadigan narsasi yo'q skroll konteynerni o'zi fokuslanadigan qiladi. Lekin jadvallar darsida aytganimizdek, bunga hamma brauzerda tayanib bo'lmaydi: tabindex="0", role="region" va nom o'z joyida qoladi.

3.2 pre va uzun qator

Bo'sh joylar va qator uzish darsida "telefonda sahifa yon tomonga suriladi" degan xato bor edi. Sabablardan biri — pre dagi uzun qator. pre qatorlarni o'zi uzmaydi, shuning uchun u butun sahifani kengaytiradi. O'shanda "pre uchun CSS yechimini keyinroq ko'ramiz" degandik:

<style>
  pre {
    overflow-x: auto;
    padding: 8px;
    border: 1px dashed #5b6660;
  }
</style>
<p>Chek:</p>
<pre>Choyxona «Bahor»              29.09.2026  12:40
Osh x2 ..................... 70 000 so'm
Ko'k choy x1 ................ 5 000 so'm
Jami ....................... 75 000 so'm</pre>
<p>Rahmat, yana keling!</p>

Nimaga qarang: telefon enida chek ramka ichida suriladi, sahifaning o'zi esa yon tomonga siljimaydi. Ikkinchi yo'l — qatorlarni uzish (Matnni o'rash darsidagi white-space: pre-wrap), lekin chekda ustunlar buziladi.

3.3 Balandligi cheklangan ro'yxat

Skroll faqat quti chegarasi bo'lganda ishlaydi. Balandligi cheklanmagan blok o'sib boraveradi — unda "toshish" umuman bo'lmaydi. Vertikal skroll uchun height yoki max-height kerak. max-height yaxshiroq: kontent kam bo'lsa, quti kichik qoladi.

«Bahor» menyusi yonida "Bugungi taomlar" ro'yxati bor. U 6 rem dan oshmasin, qolgani surilsin:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  .bugun {
    max-width: 16rem;
    max-height: 6rem;
    overflow-y: auto;
    border: 2px solid var(--rang-asosiy);
    background-color: var(--rang-fon);
  }
</style>
<h3 id="bugun-nomi">Bugungi taomlar</h3>
<div class="bugun" role="region" aria-labelledby="bugun-nomi"
     tabindex="0">
  <ul>
    <li>Osh — 35 000 so'm</li>
    <li>Lag'mon — 28 000 so'm</li>
    <li>Manti — 30 000 so'm</li>
    <li>Sho'rva — 25 000 so'm</li>
    <li>Kabob — 32 000 so'm</li>
    <li>Somsa — 8 000 so'm</li>
    <li>Ko'k choy — 5 000 so'm</li>
  </ul>
</div>

Nimaga qarang: o'ram balandligi 6rem da to'xtadi, oxirgi taomlar ichkarida surib topiladi. class="bugun" — faqat shu misol uchun nom, «Bahor» saytiga kirmaydi. Rol va nom ul ga emas, o'ramga berildi: role="region" ro'yxatning o'z "ro'yxat" ma'nosini o'chirib yuborardi.

3.4 Sahifa yon tomonga surilsa: body dagi yamoq

Viewport birliklari darsida width: 100vw sahifaga gorizontal skroll berganini ko'rgan edik. O'sha yerda internetdagi "yechim" ham tilga olingan edi:

body {
  overflow-x: hidden;
}

Endi nega yomonligini aniq ayta olamiz:

• U sababni yashiradi. Kimdir 15 piksel chiqib turibdi — endi uning o'ng cheti shunchaki kesiladi. U yerda tugma yoki matn bo'lsa, yo'qoladi.
• U butun sahifaga ta'sir qiladi. Brauzer body ning overflow qiymatini sahifaning o'z skroll oynasiga ko'chiradi (agar html ga alohida overflow yozilmagan bo'lsa).
• Ikki o'q tuzog'i. overflow-y auto ga aylanadi — ba'zi joylashuvlarda ikkinchi, ichki skroll paydo bo'ladi.

To'g'ri yo'l — aybdorni topish. Asosiy selektorlar darsidagi * { outline: 1px dashed; } hiylasini yoqing va sahifani telefon enida o'ngga suring. Chiziqlari chetdan chiqib turgan element — aybdor. Uning o'zini tuzating: 100vw ni 100% ga, qat'iy width ni max-width ga. Bezak ataylab chetdan chiqsa — faqat uning otasiga overflow-x: clip, butun sahifaga emas.

Tekshirib ko'ring: Ro'yxatga overflow-y: auto yozildi, lekin skroll paydo bo'lmadi — ro'yxat uzun bo'lib pastga cho'zilib ketdi. Nima yetishmayapti?

4. Matnni qisqartirish

4.1 Bir qator va "…"

Menyu kartasida taom nomi bitta qatorga sig'sin. Sig'masa — oxiri "…" bilan kesilsin. Buni text-overflow: ellipsis qiladi. Ellipsis — uch nuqta belgisi (…): "davomi bor" degani.

text-overflow yolg'iz ishlamaydi. Uch shart kerak:

1. Matn bir qatorda turishi — white-space: nowrap. Aks holda matn keyingi qatorga o'tadi va "toshish" bo'lmaydi.
2. Ortiqcha qism kesilishi — overflow: hidden (yoki clip). Aks holda matn qutidan chiqib ko'rinadi, kesilgan joy yo'q.
3. Cheklangan en — blok yoki inline-block element, eni cheklangan. Satr ichidagi (inline) element width ni e'tiborsiz qoldiradi (display).

white-space — bo'sh joy va qator uzish qoidasi. nowrap qiymati "qatorni uzma" degani. To'liq — Matnni o'rash darsida.

4.2 Uch shartni birma-bir buzamiz

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  .taom-nomi {
    width: 170px;
    padding: 4px;
    outline: 1px solid var(--rang-asosiy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bir { white-space: normal; }
  .ikki { overflow: visible; }
  .uch { display: inline; }
</style>
<p class="taom-nomi">✅ To'y oshi bedana tuxumi bilan</p>
<p class="taom-nomi bir">❌ To'y oshi bedana tuxumi bilan</p>
<p class="taom-nomi ikki">❌ To'y oshi bedana tuxumi bilan</p>
<p><span class="taom-nomi uch">❌ To'y oshi bedana tuxumi
bilan</span></p>

Nimaga qarang, tepadan pastga:

• — nom ramkada bitta qator bo'lib qoldi va oxiri "…" bilan tugadi.
• Qatorni uzishga ruxsat (normal) — matn ikki qatorga bo'lindi. Toshish yo'q, demak "…" ham yo'q.
• Kesish yo'q (visible) — matn ramkadan o'ngga chiqib ketdi. Brauzer "…" qo'yadigan kesilgan chet topmadi.
• Satr ichidagi element — width: 170px ishlamadi. Ramka butun matnni o'rab oldi.

Chrome'da o'lchadik: to'g'ri variantda mazmun eni 170 piksel, matnning to'liq eni esa 219 (Windows'dagi standart shriftda; boshqa shriftda son boshqacha). Brauzer ortiqcha qismni kesib, o'rniga "…" qo'ydi. outline bu yerda faqat chegarani ko'rsatadi: u joy egallamaydi (Box model).

Diqqat: Kesilgan matn yo'qolmaydi — u HTML'da to'liq turadi. Ekran o'quvchi Malikaga to'liq nomni o'qiydi, nusxa olsangiz ham to'liq nom chiqadi. Lekin ko'radigan foydalanuvchi uni o'qiy olmaydi. title atributiga tayanmang: telefonda sichqoncha yo'q, u umuman ko'rinmaydi. Muhim ma'lumotni (narx, sana) qisqartirmang. Kesiladigan narsa ochiladigan joyda to'liq bo'lsin — masalan, taom sahifasida.

4.3 Bir necha qator: -webkit-line-clamp

Taom tavsifi ikki qatordan oshmasin, ikkinchi qator oxirida "…" chiqsin. Buning uchun g'alati ko'rinadigan to'rt qator yoziladi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  .taom-karta {
    width: 220px;
    padding: 0 12px;
    border: 2px solid var(--rang-asosiy);
  }
  .taom-karta p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
</style>
<article class="taom-karta">
  <h3>Lag'mon</h3>
  <p>Qo'lda cho'zilgan xamir, mol go'shti, bulg'or qalampiri
  va maxsus ziravorlar. Achchiqligini o'zingiz tanlaysiz.</p>
</article>

Nimaga qarang: tavsif roppa-rosa ikki qator, ikkinchisi "…" bilan tugadi. Karta balandligi berilmagan — u o'zi o'lchandi. Dars boshidagi muammo ham shu bilan hal bo'ladi: hamma kartada tavsif ikki qator, kartalar bir xil baland.

Nega bunchalik g'alati? -webkit- bilan boshlangan nomlar — prefiks (vendor prefix): brauzer o'zi sinab ko'rish uchun qo'shgan imkoniyat belgisi. display: -webkit-box — flexbox'ning juda eski, bekor qilingan varianti. Undan faqat shu "qator cheklash" hiylasi qolgan. Prefiksli -webkit-line-clamp hamma asosiy brauzerda ishlaydi, lekin faqat display: -webkit-box va -webkit-box-orient: vertical bilan birga. To'rt qatorni birga yodlang.

overflow: hidden nega kerak? Chrome'da tekshirdik: usiz ham "…" chiqdi va paragraf ikki qatorga qisqardi. Lekin qolgan matn paragrafdan tashqarida chizilaverdi — xuddi dars boshidagidek.

Standartda prefiksiz line-clamp: 2 ham bor, lekin u Baseline EMAS: Baseline ma'lumotiga ko'ra u hali birorta asosiy brauzerda yo'q. Chrome'da tekshirdik — u ham bu yozuvni tanimaydi. Hozircha to'rt qatorli prefiksli yo'l — hamma asosiy brauzerda ishlaydigan yagona yo'l.

Tekshirib ko'ring: .taom-nomi { width: 12rem; overflow: hidden; text-overflow: ellipsis; } — nom baribir ikki qatorga bo'linyapti va "…" yo'q. Qaysi shart yetishmayapti?

5. Skrollbarni boshqarish

5.1 scrollbar-gutter: sakrashsiz sahifa

Viewport birliklari darsida o'lchagan edik: Windows'dagi Chrome'da skrollbar 15 piksel joy oladi. Bu joy kontent sig'magandagina paydo bo'ladi. Qisqa sahifada skrollbar yo'q, uzun sahifada — bor. Sahifadan sahifaga o'tganingizda markazdagi ustun chapga-o'ngga "sakraydi".

Skrollbar yo'lagi (scrollbar gutter) — skrollbar turadigan joy. scrollbar-gutter: stable shu yo'lakni oldindan band qiladi — skrollbar hali kerak bo'lmasa ham:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  .bugun {
    width: 12rem;
    height: 4.5rem;
    margin-bottom: 12px;
    overflow-y: auto;
    border: 2px solid var(--rang-asosiy);
  }
  .bugun p {
    margin: 0 0 4px;
    background-color: #d8ecd9;
  }
  .barqaror {
    scrollbar-gutter: stable;
  }
</style>
<div class="bugun"><p>Osh — oddiy</p></div>
<div class="bugun barqaror"><p>Osh — stable</p></div>
<div class="bugun barqaror">
  <p>Osh</p><p>Lag'mon</p><p>Manti</p><p>Kabob</p>
</div>

Nimaga qarang (Windows'da): yashil yo'lak — paragraflarning eni. Birinchi qutida u o'ng chegaragacha boradi. Ikkinchi qutida skrollbar yo'q, lekin o'ngda bo'sh yo'lak qoldi. Uchinchi qutida skrollbar aynan shu yo'lakka tushdi — ikkinchi va uchinchi qutida paragraf eni bir xil. Chrome'da o'lchadik: birinchi qutining ichki eni 192 piksel, stable qutilarniki — 177. Telefonda va macOS'da skrollbar joy egallamaydi, u yerda stable hech narsani o'zgartirmaydi.

Butun sahifa uchun qoida html ga yoziladi — buni portfolio qadamida qilasiz.

Baseline ma'lumotiga ko'ra scrollbar-gutter — yangi Baseline (2024-12-11), eski brauzerlarda ishlamaydi. Qo'rqinchli emas: u yerda xususiyat tashlab ketiladi va sahifa oldingidek biroz sakraydi, xolos.

5.2 Rang va qalinlik: scrollbar-color, scrollbar-width

Skrollbarni ikki standart xususiyat bezaydi:

• scrollbar-width — auto (odatiy), thin (ingichka) yoki none (yashirin).
• scrollbar-color — ikki rang: avval surgich (thumb), keyin yo'lak (track). Surgich — siz sichqoncha bilan tortadigan bo'lak.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  .bugun {
    max-width: 16rem;
    max-height: 7rem;
    overflow-y: auto;
    border: 2px solid var(--rang-asosiy);
    scrollbar-width: thin;
    scrollbar-color: var(--rang-asosiy) var(--rang-fon);
  }
</style>
<ul class="bugun">
  <li>Osh — 35 000 so'm</li>
  <li>Lag'mon — 28 000 so'm</li>
  <li>Manti — 30 000 so'm</li>
  <li>Sho'rva — 25 000 so'm</li>
  <li>Kabob — 32 000 so'm</li>
  <li>Ko'k choy — 5 000 so'm</li>
</ul>

Nimaga qarang: skrollbar ingichka, surgich yashil, yo'lak qaymoq rangda (telefonda va macOS'da uni ko'rish uchun ro'yxatni suring). Chrome'da o'lchadik: thin skrollbar 10 piksel, odatiysi — 15.

Baseline holati: scrollbar-width — yangi Baseline (2024-12-11), scrollbar-color — yangi Baseline (2025-12-12). Eski brauzerlarda skrollbar odatiy ko'rinishda qoladi — baribir ishlaydi.

scrollbar-width: none bilan ehtiyot bo'ling: skrollbar yo'qoladi, quti esa baribir suriladi. Foydalanuvchi ichida yana kontent borligini bilmay qoladi — "davomi bor" degan boshqa belgi qoldiring.

5.3 ::-webkit-scrollbar — eski yo'l

Internetda boshqa ko'rinishdagi kodni ko'p uchratasiz:

.bugun::-webkit-scrollbar {
  width: 8px;
}
.bugun::-webkit-scrollbar-thumb {
  background-color: #2f6b3a;
  border-radius: 4px;
}

Bu — standart emas pseudo-element, standart xususiyatlardan oldingi yo'l. MDN ma'lumotiga ko'ra, u Chrome, Edge va kompyuterdagi Safari'da ishlaydi, Firefox'da — yo'q. iPhone'dagi Safari'da esa faqat display: none ishlaydi.

Chrome'da tekshirdik: bir elementga ikkalasi ham yozilsa, Chrome ::-webkit-scrollbar ni butunlay e'tiborsiz qoldiradi. Yangi kodda standart xususiyatlarni yozing, eskisini esa tanib olsangiz yetarli.

5.4 overscroll-behavior: skroll zanjirini to'xtatish

Ro'yxatni oxirigacha surdingiz va yana g'ildirakni aylantirdingiz. Endi butun sahifa surila boshlaydi. Bu — skroll zanjiri (scroll chaining): ichki quti oxiriga yetgach, surish uning otasiga o'tadi. Ba'zan bu halaqit beradi: foydalanuvchi ro'yxatni o'qiyotgan edi, sahifa esa qochib ketdi.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  .bugun {
    max-width: 16rem;
    max-height: 5rem;
    margin-bottom: 12px;
    overflow-y: auto;
    border: 2px solid var(--rang-asosiy);
  }
  .toxta {
    overscroll-behavior: contain;
  }
</style>
<ul class="bugun">
  <li>Oddiy ro'yxat</li><li>Osh</li><li>Lag'mon</li>
  <li>Manti</li><li>Kabob</li>
</ul>
<ul class="bugun toxta">
  <li>contain</li><li>Osh</li><li>Lag'mon</li>
  <li>Manti</li><li>Kabob</li>
</ul>

Nimaga qarang: kompyuterda birinchi ro'yxatni sichqoncha g'ildiragi bilan oxirigacha suring va aylantirishni davom ettiring — dars sahifasining o'zi pastga siljiydi. Ikkinchi ro'yxatda (contain) surish ro'yxat oxirida to'xtaydi. none qiymati bundan tashqari chetdagi "cho'zilish" effektini ham o'chiradi — telefonda ro'yxat oxirida ko'rinadigan sakrash yoki yorug'likni.

overscroll-behavior rasman Baseline EMAS. MDN ma'lumotida sababi: Chrome, Firefox va Safari uni yillardan beri qo'llaydi, lekin "qisman" — Safari'da sig'magan kontenti yo'q skroll konteynerda u hali ishlamaydi. Asosiy holat — ichida haqiqatan surilayotgan ro'yxat — uchala brauzerda ishlaydi, boshqa joyda esa hech narsa buzilmaydi. Bu xususiyatni modal oynalarda ko'p ishlatasiz (Modal oyna).

Sahifa ichidagi havolaga silliq surilish (scroll-behavior: smooth) va "magnitli" skroll — Skroll xulqi darsida.

6. Ko'p uchraydigan xatolar

6.1 Balandlik yo'q — skroll yo'q

overflow-y: auto yozildi, blok esa cho'zilib ketdi. Tuzatish: max-height yoki height. Gorizontal skrollda ichidagi narsa kengroq bo'lishi kerak — jadvalga min-width, xuddi jadval o'ramidagidek.

6.2 overflow: scroll va bo'sh skrollbarlar

Windows'da kontent sig'sa ham ikki bo'sh skrollbar chiqadi, Mac'dagi dasturchi esa buni ko'rmaydi. Tuzatish: auto.

6.3 overflow: hidden fokus halqasini kesdi

Karta overflow: hidden, ichida chetga yopishgan havola bor. Tab bosildi — halqa (Holat pseudo-klasslari dagi outline-offset: 2px) karta chetida kesildi: outline tashqarida chiziladi, hidden esa tashqarini kesadi. Tuzatish: kartaga ichki padding bering yoki halqani ichkariga oling (outline-offset ga manfiy qiymat).

6.4 "…" chiqmayapti, sahifa yamoq bilan "tuzatilgan", o'ramga klaviatura yo'li yo'q

Uchalasini yuqorida ko'rdik. Tuzatish: "…" uchun uch shartni tekshiring; yamoq o'rniga aybdorni toping; o'ramga tabindex="0", rol, nom va :focus-visible bering.

7. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring.

1-mashq (oson): Qaysi qiymat?

Har vaziyat uchun overflow qiymatini tanlang:

1. Keng jadval o'rami: telefonda surilsin, kompyuterda skrollbar ko'rinmasin —
2. Kartadan chiqib turgan bezakni qat'iy kesish, ichki skroll kerak emas —
3. Tugmaning soyasi yoki "Yangi!" belgisi chetdan chiqib tursin —
4. Dizayner: "Windows'da ham skrollbar doim turib tursin" —

Ishora: "Skroll konteyner" bo'limidagi jadvalni oching. "Skroll konteyner kerakmi?" degan savol hidden bilan clip ni ajratadi.

2-mashq (o'rta): Menyu kartasi

«Bahor» menyusidagi karta:

<article class="taom-karta">
  <h3 class="taom-nomi">To'y oshi bedana tuxumi va qazi bilan</h3>
  <p>Guruch, sabzi, mol go'shti, qazi, bedana tuxumi va
  no'xat. Katta qozonda, o'tinda damlanadi. Bir porsiya
  ikki kishiga yetadi.</p>
  <p><span class="narx">45 000 so'm</span></p>
</article>

asosiy.css ga yozing:

1. Karta eni 16rem, chegarasi 2px asosiy rangda.
2. Taom nomi bitta qatorda, sig'masa — "…".
3. Tavsif (narxsiz paragraf) ko'pi bilan ikki qator, oxiri "…".
4. Narx qisqartirilmasin va urg'u rangida bo'lsin.

Ishora: 3-band uchun paragrafni ajratish kerak. Narxli paragraf span.narx ni o'z ichiga oladi — :has() (Mantiqiy pseudo-klasslar) yoki :not() bilan narxsizini tanlang. Qator cheklashning to'rt qatori — "Bir necha qator" bo'limida.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  .taom-karta {
    width: 16rem;
    padding: 0 12px;
    border: 2px solid var(--rang-asosiy);
  }
  .taom-nomi {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .taom-karta p:not(:has(.narx)) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .narx {
    color: var(--rang-urgu);
    font-weight: bold;
  }
</style>
<article class="taom-karta">
  <h3 class="taom-nomi">To'y oshi bedana tuxumi va qazi bilan</h3>
  <p>Guruch, sabzi, mol go'shti, qazi, bedana tuxumi va
  no'xat. Katta qozonda, o'tinda damlanadi. Bir porsiya
  ikki kishiga yetadi.</p>
  <p><span class="narx">45 000 so'm</span></p>
</article>

3-mashq (qiyin): Nega ishlamayapti?

Stajyor menyu sahifasiga shunday CSS yozdi:

body {
  overflow-x: hidden;
}
.aksiya-lenta {
  width: 100vw;
}
.bugun {
  overflow-y: auto;
}
.taom-karta .narx {
  width: 6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Shikoyatlar: (a) Windows'da aksiya lentasining o'ng cheti kesilgan; (b) "Bugungi taomlar" ro'yxati surilmaydi, sahifani cho'zib yuboradi; (c) narx span da, "…" chiqmayapti, uzun narx esa qo'shni matnni itaradi.

1. Har shikoyatning sababini toping.
2. Tuzatilgan CSS'ni yozing. Narx bo'yicha qaror ham qabul qiling: uni qisqartirish to'g'rimi?

Ishora: 100vw ni Viewport birliklari darsida ko'rgansiz. span — satr ichidagi element.

.aksiya-lenta {
  width: 100%;
}
.bugun {
  max-height: 10rem;
  overflow-y: auto;
}
.taom-karta .narx {
  white-space: nowrap;
}

4-mashq: Portfolio qadami — sakramaydigan sahifa

Portfoliongizning sahifalari turli uzunlikda. Bosh sahifa va "Men haqimda" uzun, "Aloqa" ham ancha uzun, 404.html esa qisqa. Windows'dagi kompyuterda menyu bo'ylab yurganda markazdagi ustun biroz chapga-o'ngga sakraydi.

1. asosiy.css ga butun sahifa uchun skrollbar yo'lagini band qiladigan qoida qo'shing.
2. Skrollbarni portfolio ranglariga moslang: surgich — brend rangi, yo'lak — och fon.
3. Tekshiring: DevTools qurilma rejimida 360 piksel enni tanlang va sahifalarni birma-bir oching. Birorta sahifa yon tomonga surilmasin. Surilsa — aybdorni * { outline: 1px dashed; } bilan toping va o'zini tuzating.

Ishora: butun sahifaning skroll oynasi — html elementi (body dagi yamoq haqidagi bo'limni eslang). Ranglar — :root dagi --rang-asosiy va --rang-fon-och (Ranglar 3).

html {
  scrollbar-gutter: stable;
  scrollbar-color: var(--rang-asosiy) var(--rang-fon-och);
}

8. Real ishda

• Jadvallar va kod bloklari deyarli hamma saytda overflow-x: auto o'ramida: uzun qator sahifani emas, faqat blokni suradi.
• Chat oynasi — max-height + overflow-y: auto + overscroll-behavior: contain. Telegram Web'dagi xabarlar ro'yxati ham skroll konteyner.
• Mahsulot kartalari — nom bir qator, tavsif -webkit-line-clamp bilan, hamma karta bir xil baland.
• Modal oyna ochilganda orqadagi sahifani to'xtatish — Modal oyna va skroll bloklash darsida.
• Intervyuda so'raladi: "overflow: hidden va clip farqi nima?", "text-overflow: ellipsis ishlashi uchun nima kerak?", "Nega overflow-x: hidden vertikal skroll chiqarib yubordi?".

Xulosa

• Sig'magan kontent standart holatda tashqarida ko'rinadi (visible) va joy egallamaydi.
• hidden, scroll, auto — skroll konteyner yaratadi; clip — qat'iy qirqadi, konteyner yaratmaydi.
• Bir o'q kesilsa yoki surilsa, ikkinchisi visible bo'lolmaydi — auto ga aylanadi (clip bundan mustasno).
• Skroll uchun chegara kerak: max-height, jadvalga min-width; o'ramga tabindex="0", rol va nom.
• "…" uchun uch shart: nowrap, overflow: hidden, cheklangan en; ko'p qator — to'rt qatorli -webkit-line-clamp.
• Skrollbar — scrollbar-gutter, scrollbar-width, scrollbar-color (yangi, standart); ::-webkit-scrollbar — eski yo'l.

Keyingi dars: Chegara, burchak, outline va soyalar — border uslublari, yumaloq burchaklar, fokus halqasi va elementga chuqurlik beradigan soyalar.

Manbalar

• MDN: "overflow", "text-overflow", "-webkit-line-clamp", "scrollbar-gutter", "scrollbar-color", "scrollbar-width", "::-webkit-scrollbar", "overscroll-behavior" — developer.mozilla.org
• W3C: "CSS Overflow Module Level 3" — w3.org/TR/css-overflow-3
• W3C: "CSS Scrollbars Styling Module Level 1" — w3.org/TR/css-scrollbars-1
• web-features (Baseline ma'lumotlari): "line-clamp", "scrollbar-gutter", "scrollbar-width", "scrollbar-color", "overscroll-behavior" — github.com/web-platform-dx/web-features