CSS - overflow-y 屬性

CSS overflow-y 屬性決定當塊級元素的內容超過元素頂部和底部邊緣時如何顯示。

可能的值

visible − 溢位的內容顯示在元素邊界之外。
hidden − 內容被裁剪，任何溢位內容都不可見。
clip − 元素的內容被裁剪，不會溢位元素的頂部和底部邊緣。
scroll − 透過新增捲軸使元素可滾動。
auto − 當元素內容溢位其頂部和底部邊緣時，會向元素新增捲軸。

應用於

所有 HTML 元素。

DOM 語法

object.style.overflowY = "visible|hidden|clip|scroll|auto";

CSS overflow-y - 使用 visible 和 hidden 值

以下示例演示了當overflow-y 屬性設定為visible時，它允許內容在其頂部和底部邊緣的內邊距框處溢位；或者當設定為hidden時，它隱藏任何溢位的內容。

<html>
<head>
<style>
   .container {
      display:flex;
   }
   div.overflow-y-visible {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-y: visible;
      margin-right: 100px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
   div.overflow-y-hidden {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-y: hidden;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="overflow-y-visible">
         <h4>Tutorialspoint CSS Overflow-y Visible</h4>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
      </div>
      <div class="overflow-y-hidden">
         <h4>Tutorialspoint CSS Overflow-y Hidden</h4>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
      </div>
   </div>
</body>
</html>

CSS overflow-y - clip 值

overflow-y: clip 屬性隱藏任何超過元素內邊距框的垂直溢位內容。不會新增捲軸。

示例

這是一個示例：

<html>
<head>
<style>
   div.overflow-y-clip {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-y: clip;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
</style>
</head>
<body>
   <div class="overflow-y-clip">
      <h4>Tutorialspoint CSS Overflow-y Clip</h4>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
   </div>
</body>
</html>

CSS overflow-y - 使用 scroll 和 auto 值

overflow-y 屬性可以設定為scroll 或auto。scroll 值會在其內容溢位頂部和底部邊緣時向元素新增捲軸。

auto 值僅在其內容溢位頂部和底部邊緣時向元素新增捲軸。

<html>
<head>
<style>
   .container {
      display:flex;
   }
   div.overflow-y-scroll {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-y: scroll;
      margin-right: 100px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
   div.overflow-y-auto {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-y: auto;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="overflow-y-scroll">
         <h4>Tutorialspoint CSS Overflow-y Scroll</h4>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
      </div>
      <div class="overflow-y-auto">
         <h4>Tutorialspoint CSS Overflow-y Auto</h4>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
      </div>
   </div>
</body>
</html>

列印頁面