CSS

overflow

В этом уроке мы научимся с вами работать со скроллом.

И первое, что мы можем сделать со скроллом – это, естественно, заблокировать. Для этого мы в «body» прописываем CSS-свойство «overflow» и задаём значение «hidden». 

body{
  overflow:hidden;
}

Так же, скролл можно зафиксировать по определённой оси. 

body{
  overflow-x:hidden;
}

body{
  overflow-y:hidden;
}

Также с помощью этого свойства мы можем управлять скроллом в каком-то боксе. Зададим ему размер 200 на 200 и добавим текст.

Текст у нас по ширине ограничился, а по высоте выходит за пределы нашего бокса. Если мы хотим, чтобы текст не выходил за пределы бокса, то, во-первых, мы сделаем «overflow: hidden», и тогда всё, что выходит за пределы бокса будет обрезаться.

На будущее, если вам нужно сделать так, чтобы всё, что выходит за пределы бокса обрезалось, то вы задаёте «overflow: hidden», и тогда собственно это и произойдет.

Или же мы хотим, чтобы внутри этого блока появился скролл. Просто задаём «overflow: auto», тогда на странице у нас появится в боксе скролл, который позволяет скроллить контент внутри этого блока, который выходит за пределы нашего бокса.

Так же вы можете делать скролл по оси X или по оси Y. 

Собственно говоря, вот так вот вы можете управлять скроллом. На самом деле, свойство «overflow» со значением «hidden» используется не только для управления сколлом. Есть фишечка которая связана с «float», и опять же это мы будем изучать уже в верстке, но просто на будущее скажу, что «overflow» тоже свойство такое не очень простое и позволяет делать некоторые фишечки. Просто сейчас не хочу вас грузить лишней информацией сложной. Это мы будем изучать всё-таки при вёрстке.

Собственно, пока что с «overflow: hidden» всё. Мы к нему опять же ещё вернёмся, а пока что вы можете продолжить изучать следующие CSS-свойства.