CSS / Overflow ба scroll

Overflow ба scroll

Элементийн агуулга тогтоосон хэмжээнд багтахгүй болоход хэрхэн зохицуулах — энэ бол overflow-ийн ажил.

overflow гэж юу вэ?

Элементэд width ба height тогтоосон боловч агуулга илүү их болвол overflow буюу хальж гарна:

css

.хайрцаг {
  width: 200px;
  height: 100px;
  /* агуулга 100px-ийг давбал яах вэ? */
}

overflow-ийн дөрвөн утга

visible (анхдагч)

Агуулга хальж гарах боловч харагдсаар байна:

css

.харагдана {
  overflow: visible; /* анхдагч — бичихгүй ч ижил */
}

hidden — нуух

Хальсан хэсгийг нуух:

css

.нуух {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

Хэрэглэх тохиолдол:

Зургийн border-radius зөв харагдуулах
Гулсах animation-д хэрэглэгдэх container
Текстийн нэг мөрт хязгаарлах

scroll — гүйлгэх мөр байнга

Агуулга багтах ч гэсэн гүйлгэх мөр байнга харагдана:

css

.гүйлгэх-мөр {
  overflow: scroll;
}

auto — шаардлагатай үед гүйлгэх мөр

Агуулга хальсан тохиолдолд л гүйлгэх мөр гарна — хамгийн ашигтай утга:

css

.ухаалаг {
  height: 300px;
  overflow: auto;
}

overflow-x ба overflow-y — тусдаа тохиргоо

Хэвтээ ба босоо тэнхлэгт тусдаа тохируулна:

css

/* Босоо гүйлгэх, хэвтээ нуух */
.зөвхөн-доош {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Хэвтээ гүйлгэх, босоо нуух */
.хэвтээ-гүйлгэх {
  overflow-x: auto;
  overflow-y: hidden;
}

Хэвтээ гүйлгэх жишээ — картууд жагсаалт:

css

.карт-жагсаалт {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px; /* гүйлгэх мөр зайтай байхын тулд */
}

.карт-жагсаалт .карт {
  flex-shrink: 0; /* картыг жижигрүүлэхгүй */
  width: 240px;
}

text-overflow — текстийн хэтрэлт

Нэг мөрт текст хэт урт болоход хэрхэн үзүүлэхийг тодорхойлно.

text-overflow ажиллахын тулд гурван property хамтдаа бичнэ:

css

.нэг-мөр {
  white-space: nowrap; /* мөр таслахгүй */
  overflow: hidden; /* хальсан хэсгийг нуух */
  text-overflow: ellipsis; /* ... үзүүлэх */
}

css

/* Жишээ: картын гарчиг */
.карт-гарчиг {
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

text-overflow-ийн утгууд

css

.хуваах {
  text-overflow: clip;
} /* таслах — анхдагч */
.цэг-цэг {
  text-overflow: ellipsis;
} /* ... нэмэх */

Олон мөрт ellipsis

Нэг мөр биш, гурван мөрт хязгаарлах:

css

.гурван-мөр {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* хэдэн мөр */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

scroll-behavior — гүйлгэх хэлбэр

Хуудас дотор холбоосоор үсрэх үед жигд гүйлгэнэ:

css

html {
  scroll-behavior: smooth; /* жигд гүйлгэх */
}

css

/* Анхдагч — шууд үсрэх */
html {
  scroll-behavior: auto;
}

HTML холбоосуудтай хамтдаа:

html

<a href="#холбоос-хэсэг">Тэнд очих</a>

<section id="холбоос-хэсэг">
  <!-- scroll-behavior: smooth бол жигд гүйлгэнэ -->
</section>

Гүйлгэх мөрийн загвар

Вэбкит хөтчүүдэд (Chrome, Safari, Edge) гүйлгэх мөрийг загварчлах боломжтой:

css

/* Нарийн, хар дэвсгэртэй гүйлгэх мөр */
.гүйлгэх-хайрцаг::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.гүйлгэх-хайрцаг::-webkit-scrollbar-track {
  background: #0f172a;
}

.гүйлгэх-хайрцаг::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 3px;
}

.гүйлгэх-хайрцаг::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

Firefox-д:

css

.гүйлгэх-хайрцаг {
  scrollbar-width: thin;
  scrollbar-color: #1e293b #0f172a;
}

Гүйлгэх snap

Гүйлгэх үед тодорхой байрлалд тогтоно — slider, carousel-д хэрэглэнэ:

css

/* Container */
.slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
}

/* Дотоод элемент */
.слайд {
  flex-shrink: 0;
  width: 100%;
  scroll-snap-align: start;
}

Бодит жишээ: Мессежийн жагсаалт

css

/* Мессежийн container — доошоо гүйлгэдэг */
.мессеж-хайрцаг {
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: #1e293b #0f172a;
}

/* Хэрэглэгчийн нэр — нэг мөрт хязгаарлах */
.хэрэглэгч-нэр {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

/* Мессежийн preview — гурван мөр */
.мессеж-preview {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #94a3b8;
  font-size: 14px;
}

Нийтлэг алдаа

css

/* БУРУУ — overflow: hidden border-radius-ийн дотор */
.карт {
  border-radius: 12px;
  /* overflow: hidden байхгүй бол дотрын зураг буланг дагахгүй */
}

/* ЗӨВ */
.карт {
  border-radius: 12px;
  overflow: hidden; /* ← зургийг буланд нийцүүлнэ */
}

Дараагийн хичээлд:

z-index ба stacking context — давхарласан элементүүдийн дараалал, аль нь дээр харагдахыг хэрхэн удирдахыг судална.

← Өмнөх хичээлCSS filter Дараах хичээл →Z-index ба stacking context