مثال على خاصية CSS overflow-y - محرر حالي عبر الإنترنت (oldtoolbag.com)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>مثال على خاصية overflow-y في CSS - تعليميات الأساس (oldtoolbag.com)</title>
  <style>
      div {
          width: 250px;
          height: 150px;
          border: 1px solid #cccccc;
      }
      div.scroll {            
          overflow-y: scroll;
      }
      div.hidden {
          overflow-y: hidden;
      }
  </style>
</head>
<body>
<h1>غيير حجم div لرؤية كيف يعمل</h1>
   <h2>overflow-y: scroll</h2>
   <div class="scroll">
       يمكنك استخدام الشريط التدولي العمودي لرؤية المحتوى المتجاوز.
       يمكنك استخدام الشريط التدولي العمودي لرؤية المحتوى المتجاوز.
       يمكنك استخدام الشريط التدولي العمودي لرؤية المحتوى المتجاوز.
       يمكنك استخدام الشريط التدولي العمودي لرؤية المحتوى المتجاوز.
       يمكنك استخدام الشريط التدولي العمودي لرؤية المحتوى المتجاوز.
   </div>
   <h2>overflow-y: hidden</h2>
   <div class="hidden">
       المحتوى الذي يتجاوز الحافة العمودية يُخفى.
       المحتوى الذي يتجاوز الحافة العمودية يُخفى.
       المحتوى الذي يتجاوز الحافة العمودية يُخفى.
       المحتوى الذي يتجاوز الحافة العمودية يُخفى.
       المحتوى الذي يتجاوز الحافة العمودية يُخفى.
       المحتوى الذي يتجاوز الحافة العمودية يُخفى.
       المحتوى الذي يتجاوز الحافة العمودية يُخفى.
   </div>
</body>
</html>