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

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

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

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

 

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

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

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

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

 

آموزش :

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

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

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

نکته :

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

 

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

شاد باشید.

برای امتیاز به این نوشته کلیک کنید!
[کل: ۰ میانگین: ۰]
با دوستانتان به اشتراک بگذارید

10 دیدگاه

  1. f.gh

    سلام وقت بخیر
    واقعا ممنونم خیلی بدردم خورد من یه عکس داشتم که با جاوا اسکریپت وقتی اسکرول می شد دو قسمت میشد ولی اسکرول افقی هم می خورد و نمی دونستم چه طوری اسکرول افقی شو حذف کنم الان مشکلش بر طرف شد
    سپاس

    1. مهدی نقدی زاده

      سلام من میخواستم یه باکس دیو با اسکرول افقی مثل صفحه اصلی همیار وردپرس داشته باشم آیا این کد رو آورفلو رو‌ بذارم رو ایکس همین اتفاق میافته برام؟

  2. فاطمه

    سلام خسته نباشید . من هرکاری میکنم سایتم اسکرول نمیخوره هرچی اضافه میکنم وسط میوفته …اگرم اسکرول بخوره محتوام تکون نمیخوره .اگه میشه کمک کنید توروخدا پروژم ناقص وقتمم کمه .

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code