ساخت div با اسکرول عمودی در html
در این آموزش قصد معرفی یک ترفند بسیار ساده برای ساخت یک div دارای Scroll را داریم. شاید بسیاری از دوستان برای این‌کار به سراغ روش غیرعادی iframe بروند.
ساخت div با اسکرول عمودی در html
خب در انتهای این آموزش ما قصد داریم یک div به شکل زیر بسازیم که در صورت بزرگ بودن مواردی که درون آن هستند با اسکرول بتوان بقیه را مشاهده کرد.
روش غلط:
قبل از اینکه این آموزش را بنویسم در جایی شخصی رو دیدم که برای ساخت یک باکس به شکل بالا از تگ iframe استفاده می‌کرد و خب این خیلی غیرقابل قبول بود و بعد از اینکه این مورد رو بهش یاد دادم تصمیم گرفتم برای آموزش هم این پست را نوشته تا دیگران هم استفاده کنند.
آموزش:
ابتدا یک div بسازید و به آن یک کلاس برای دسترسی آن در css نسبت دهید:
<div class="scroll-div"></div>
سپس وارد فایل css خود شوید و استایل زیر را در آن وارد کنید:
.scroll-div {
width:100%;
height: 500px;
overflow-y: scroll;
}
حالا شما یک div اسکرول دار در اختیار دارید و اگر مواردی که در این div موجود است از 500 پیکسل ارتفاع بیش‌تری دارد با اسکرول موجود می‌توانید آن‌ها را مشاهده کنید.
نکته:
در کد css بالا گفته شده که در صورت اضافه‌تر شدن ارتفاع داخلی مقدار زیادتر به صورت scroll نمایش داده شود پس ارتفاع بسیار مهم است. لطفا نظرات خود را برای ما ارسال کنید.