Overflow X va Y


ULASHISH

Ma’lum yo‘nalishlarda overflow

overflow-x va overflow-y xossalari overflow xatti-harakatini gorizontal va vertikal yo‘nalishlar uchun mustaqil boshqarish imkonini beradi.


CSS overflow-x va overflow-y

overflow-x va overflow-y xossalari kontent overflow’ni faqat gorizontal yoki faqat vertikal (yoki ikkalasida) o‘zgartirish kerakligini belgilaydi:

  • overflow-x kontentning chap/o‘ng chetlari bilan nima qilish kerakligini belgilaydi.
  • overflow-y kontentning yuqori/pastki chetlari bilan nima qilish kerakligini belgilaydi.
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.

Misol

Gorizontal scroll panelini yashirish va vertikal scroll panelini qo‘shish:

div {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
}
O‘zingiz sinab ko‘ring »


Keng tarqalgan qo‘llanish holatlari

Bu xossalar gorizontal va vertikal kontent uchun turli scroll xatti-harakati kerak bo‘lganda foydali:

  • Gorizontal scroll qilinadigan jadval — keng jadvallar uchun overflow-x: auto dan foydalaning
  • Chat oynalari — vertikal xabar scroll qilish uchun overflow-y: scroll dan foydalaning
  • Kod bloklari - uzun satrlarni boshqarish uchun overflow-x: auto’dan foydalaning

Misol

Faqat gorizontal scroll panelini qo‘shing:

div {
  overflow-x: scroll;
  overflow-y: hidden;
}
O‘zingiz sinab ko‘ring »


W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!