Чӣ кор мекунад хусусияти overflow дар CSS ва дар кадом ҳолатҳо бояд истифода шавад?

Хусусияти overflow дар CSS муайян мекунад, ки чӣ гуна бо мундариҷа, ки аз ҳадди элемент мегузарад, муносибат кардан лозим аст.

• visible: Мундариҷа пурра нишон дода мешавад, ҳатто агар аз ҳадди контейнер гузарад.
• hidden: Мундариҷаи аз ҳадди контейнер гузаришкарда киса мешавад ва намоён нест.
• scroll: Ҳамеша сӯрохиҳои ҳаракат (гориозӣ ва амудӣ) нишон дода мешаванд, ҳатто агар мундариҷа аз ҳад гузарад.
• auto: Сӯрохиҳои ҳаракат танҳо дар ҳолате пайдо мешаванд, ки лозим бошад (ҳангоми гузариши мундариҷа).

Истифода:

• Вақте ки мундариҷаи элемент (масалан, матн ё тасвир) метавонад аз андозаи муқарраршуда калонтар бошад ва лозим аст, ки онро идора кард.
• Барои эҷоди минтақаҳои ҳаракатшаванда дар дохили саҳифа, масалан, барои рӯйхатҳо, блокҳои код ё ҷадвалҳо.
• Барои буридани мундариҷаи нолозим, ки аз ҳад мегузарад, то сохтори аслӣ нигоҳ дошта шавад.

Масалан, истифодаи overflow: auto; барои як блок бо баландии маҳдуд:

.scrollable-block {
  height: 200px; /* Маҳдуд кардани баландии блок */
  overflow: auto; /* Илова кардани сӯрохиҳои ҳаракат, агар мундариҷа калонтар бошад */
  border: 1px solid #ccc; /* Илова кардани марз барои равшанӣ */
  padding: 10px; /* Маҳдудияти дохилӣ */
}