Autor publikacji
Virtual Patriot - Administrator

overflow-y

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości overflow-y

Za pomocą właściwości overflow-y możemy określić co ma stać się z treścią niemieszczącą się w obszarze wyznaczonym przez zewnętrzną krawędź dolnego wewnętrznego marginesu interesującego nas elementu HTML.

Informacje dodatkowe

brak

Informacje techniczne o właściwości overflow-y

przeznaczenie

element HTML tworzący blok treści

pozycja

dowolna

dziedziczenie

nie

wartość initial

visible (lub auto gdy wartością właściwości overflow-x elementu HTML jest wartość różna od wartości visible)

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości overflow-y

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości overflow-y

visible

Wyjaśnienie

Wartość visible jest domyślną wartością właściwości overflow-y.

Domyślnie treść niemieszcząca się w obszarze wyznaczonym przez zewnętrzną krawędź dolnego wewnętrznego marginesu elementu HTML pozostaje widoczna.

Przykład

  overflow-y:visible;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Treść niemieszcząca się w obszarze wyznaczonym przez zewnętrzną krawędź dolnego wewnętrznego marginesu przykładowego elementu "div" pozostała widoczna.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        width:250px;
        height:75px;
        border:15px solid orange;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

hidden

Wyjaśnienie

Za pomocą wartości hidden właściwości overflow-y możemy sprawić, że treść niemieszcząca się w obszarze wyznaczonym przez zewnętrzną krawędź dolnego wewnętrznego marginesu interesującego nas elementu HTML zostanie ukryta.

Przykład

  overflow-y:hidden;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Treść niemieszcząca się w obszarze wyznaczonym przez zewnętrzną krawędź dolnego wewnętrznego marginesu przykładowego elementu "div" została ukryta, ponieważ do wspomnianego elementu "div" została dodana właściwość "overflow-y" wraz z wartością "hidden".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        overflow-y:hidden;
        width:250px;
        height:75px;
        border:15px solid orange;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

scroll

Wyjaśnienie

Za pomocą wartości scroll właściwości overflow-y możemy sprawić, że do obszaru interesującego nas elementu HTML zostanie dodany (nawet gdy nie jest to konieczne) pionowy suwak służący do przewijania treści.

Przykład

  overflow-y:scroll;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Do obszaru przykładowego elementu "div" został dodany pionowy suwak służący do przewijania treści, ponieważ do wspomnianego elementu "div" została dodana właściwość "overflow-y" wraz z wartością "scroll".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        overflow-y:scroll;
        width:250px;
        border:15px solid orange;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

auto

Wyjaśnienie

Za pomocą wartości auto właściwości overflow-y możemy sprawić, że do obszaru interesującego nas elementu HTML zostanie dodany (lecz tylko wtedy, gdy jest to konieczne) pionowy suwak służący do przewijania treści.

Przykład

  overflow-y:auto;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Ze względu na to, iż treść przykładowego elementu "div" nie mieści się w obszarze wyznaczonym przez zewnętrzną krawędź dolnego wewnętrznego marginesu przykładowego elementu "div", do obszaru przykładowego elementu "div" został dodany pionowy suwak służący do przewijania treści, ponieważ do wspomnianego elementu "div" została dodana właściwość "overflow-y" wraz z wartością "auto".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        overflow-y:auto;
        width:250px;
        height:75px;
        border:15px solid orange;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>