آموزش CSS - نوارهای پیمایش(scrollbars)

وقتی محتوای یک عنصر بزرگتر از فضای اختصاص داده شده به آن باشد،می‌توان از خاصیت overflow در CSS برای مدیریت این وضعیت استفاده کرد. این خاصیت به مرورگر می‌گوید که در صورت سرریزی محتوا از ابعاد مشخص شده برای عنصر، چه کار انجام دهد.

مقادیر ممکن برای overflow عبارتند از:

شماره	مقدار و توضیحات
1	visible این مقدار به مرورگر می‌گوید که محتوا خارج از ابعاد عنصر قابل مشاهده است و باید نمایش داده شود. (این مقدار به طور معمول برای عناصر بلاک استفاده می‌شود)
2	hidden با این مقدار، مرورگر محتوایی که از ابعاد مشخص شده سرریزشده را پنهان می‌کند و نمایش نمی‌دهد.
3	scroll اگر محتوا از ابعاد مشخص شده سرریز شود، یک نوار اسکرول ایجاد می‌شود تا کاربر بتواند به طول و عرض اضافه شده دسترسی پیدا کند.
4	auto این مقدار به مرورگر اجازه می‌دهد تا به صورت خودکار تصمیم بگیرد که بر اساس محتوا و ابعاد عنصرآیا باید یک نوار اسکرول ایجاد شود یا ایجاد نشود.

<html>
   <head>
      <style type = "text/css">
         .scroll {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:scroll;
         }
         .auto {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:auto;
         }
      </style>
   </head>

   <body>
      <p>Example of scroll value:</p>
      <div class = "scroll">
من قصد دارم مطالب زیادی را در اینجا نگه دارم تا به شما نشان دهم چگونه

        اسکرول‌بارها در صورتی کار می‌کنند که سرریز در یک جعبه عنصر وجود داشته باشد. 
این نوارهای اسکرول افقی و عمودی شما را فراهم می کند.      </div>
      <br />
      
      <p>Example of auto value:</p>
      
      <div class = "auto">
من قصد دارم مطالب زیادی را در اینجا نگه دارم تا به شما نشان دهم چگونه         
اسکرول‌بارها در صورتی کار می‌کنند که سرریز در یک جعبه عنصر وجود داشته باشد.       
این نوارهای اسکرول افقی و عمودی شما را فراهم می کند.      </div>
   </body>
</html>

ابعاد(dimension) - درس قبلی

درس بعدی - قابلیت مشاهده(visibility)