آموزش نوارهای پیمایشی در CSS

4 سال پیش

امتیاز دهید post

آموزش نوارهای پیمایشی در CSS

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش نوارهای پیمایشی در CSS خواهیم پرداخت.

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

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

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

مثال:

Live Demo
&lt;html&gt;
   &lt;head&gt;
      &lt;style type = "text/css"&gt;
         .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;
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p&gt;Example of scroll value:&lt;/p&gt;
      &lt;div class = "scroll"&gt;
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      &lt;/div&gt;
      &lt;br /&gt;
      
      &lt;p&gt;Example of auto value:&lt;/p&gt;
      
      &lt;div class = "auto"&gt;
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

Live Demo

<html>

<head>

.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>

I am going to keep lot of content here just to show you how

scrollbars works if there is an overflow in an element box.

This provides your horizontal as well as vertical scrollbars.

</div>

<br />

<p>Example of auto value:</p>

I am going to keep lot of content here just to show you how

scrollbars works if there is an overflow in an element box.

This provides your horizontal as well as vertical scrollbars.

</div>

</body>

</html>

خروجی

Example of scroll value:

I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. This provides your horizontal as wellas vertical scrollbars.

Example of auto value:

I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. This provides your horizontal as well as vertical scrollbars.

Example of scroll value:

I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. This provides your horizontal as wellas vertical scrollbars.

Example of auto value:

I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. This provides your horizontal as well as vertical scrollbars.

منبع.

لیست جلسات قبل آموزش CSS

امتیاز دهید post

نویسنده مطلب saber

آموزش نوارهای پیمایشی در CSS

آموزش نوارهای پیمایشی در CSS

خروجی

لیست جلسات قبل آموزش CSS

دیدگاه شما

بدون دیدگاه

آموزش نوارهای پیمایشی در CSS

خروجی

لیست جلسات قبل آموزش CSS

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه