عضو کانال یوتیوب ما شوید.

ساخت div با اسکرول عمودی در html

وسط چین کردن المان inline-block
وسط چین کردن المان inline-block

ساخت div با اسکرول در html

در این آموزش قصد معرفی یک ترفند بسیار ساده برای ساخت یک div دارای Scroll را داریم.

شاید بسیاری از دوستان برای اینکار به سراغ روش غیرعادی iframe بروند پس در این آموزش همراه ما باشید.

 

آموزش ایجاد div با اسکرول عمودی

خب در انتهای این آموزش ما قصد داریم یک div به شکل زیر داشته باشیم که در صورت بزرگ بودن مواردی که درون آن هستند با اسکرول بتوان بقیه را مشاهده کرد.

ساخت div با اسکرول عمودی در html
ساخت div با اسکرول عمودی در html
روش غلط :

قبل از اینکه این آموزش را بنویسم در جایی شخصی رو دیدم که برای ساخت یک باکس به شکل بالا از تگ iframe استفاده می کرد و خب این خیلی غیرقابل قبول بود و بعد از اینکه این مورد رو بهش یاد دادم تصمیم گرفتم برای آموزش هم این پست را نوشته تا دیگران هم استفاده کنند.

 

آموزش :

ابتدا یک div بسازید و به آن یک کلاس برای دسترسی آن در css نسبت دهید:

<div class="scroll-div"></div>

سپس وارد فایل css خود شوید و استایل زیر را در آن وارد کنید:

.scroll-div {
width:100%;
height: 500px;
overflow-y: scroll;
}

حالا شما یک div اسکرول دار در اختیار دارید و اگر مواردی که در این div موجود می باشد از 500 پیکسل ارتفاع بیشتری داشته باشند با اسکرول موجود می توانید آنها را مشاهده کنید.

نکته :

در کد css بالا گفته شده که در صورت اضافه تر شدن ارتفاع داخلی مقدار زیادتر به صورت scroll نمایش داده شود پس ارتفاع بسیار مهم می باشد.

 

لطفا نظرات خود را برای ما ارسال کنید.

شاد باشید.

برای امتیاز به این نوشته کلیک کنید!
[کل: 6 میانگین: 4.3]