რა აკეთებს overflow თვისება CSS-ში და რა შემთხვევებში უნდა გამოიყენოს?

CSS-ში overflow თვისება განსაზღვრავს, როგორ უნდა მოექცეს მასალა, რომელიც გადის ელემენტის საზღვრებს.

• visible: მასალა სრულად ჩანს, მაშინაც კი, თუ ის გადის კონტეინერის საზღვრებს.
• hidden: გადამეტებული მასალა, რომელიც გადის კონტეინერის საზღვრებს, გაჭრილია და არ ჩანს.
• scroll: ყოველთვის ჩანს სლაიდერი (ჰორიზონტალური და ვერტიკალური), მაშინაც კი, თუ მასალა არ გადის.
• auto: სლაიდერი გამოჩნდება მხოლოდ საჭიროების შემთხვევაში (როდესაც მასალა გადის).

გამოყენება:

• როდესაც ელემენტის მასალა (მაგალითად, ტექსტი ან სურათი) შეიძლება იყოს უფრო დიდი, ვიდრე განსაზღვრული ზომები და საჭიროა მისი მართვა.
• გვერდის შიგნით სვლადი ზონების შექმნა, მაგალითად, სია, კოდის ბლოკები ან ცხრილები.
• არასასურველი მასალის გაჭრა, რომელიც გადის ელემენტს, რათა შეინარჩუნოს თავდაპირველი განლაგება.

overflow: auto; გამოყენების მაგალითი, შეზღუდული სიმაღლის ბლოკისთვის:

.scrollable-block {
  height: 200px; /* ბლოკის სიმაღლის შეზღუდვა */
  overflow: auto; /* თუ მასალა დიდია, სლაიდერი დაემატოს */
  border: 1px solid #ccc; /* საზღვრის დამატება გასაგებად */
  padding: 10px; /* შიდა შუალედი */
}