ساخت باکس اسکرول دار با css

ساخت باکس اسکرول دار با css

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

حتما فکر کردید که ساخت چنین باکس اسکرول داری حتما نیازمند نوشتن کد های jquery هست. اما حقیقت اینطور نیست. این کار رو با کد های css هم میتونید انجام بدید. کافیه ابتدا div مورد نظر خودتون رو بسازید. بعد از ساخت div باید یک کلاس به div مورد نظر بدهیم. به عنوان مثال می خواهیم یک باکس با پس زمینه خاکستری با کد رنگ #ddd و پهنای ۲۰۰ پیکسل و ارتفاع ۲۰۰ پیکسل بسازیم. برای اینکار کد زیر را در html قالب سایت خودتون بنویسید.

کد

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

حالا کد سی اس اس زیر رو هم داخل فایل css قالب قرار بدید. در صورتی که سایت شما وردپرسی هست باید این کد رو در style.css قالب وردپرس خودتون قرار بدید.

کد
.expres-box{
width:200px;
height:200px;
background:#eee;
overflow-y:scroll;
}

در کد بالا کار اصلی ( یعنی اسکرول دار کردن باکس ) رو خاصیت overflow-y:scroll انجام میده. شما با دادن این خاصیت به div دستور می دهید تا در صورت بیشتر شدن محتوای داخل باکس از ارتفاع div که در اینجا height:200px در نظر گرفته شده ، محتوا را بصورت اسکرول دار در جهت عمودی نمایش دهد. برای درج اسکرول بصورت افقی هم می توانید به جای overflow-y ، خاصیت overflow-x را قرار دهید.

همانطور که گفته شد برای تنظیم ارتفاع div می توانید مقدار ۲۰۰px خاصیت height را به میزان دلخواه خود تغییر بدید

scroll-box



  • 502 بازدید
  • بهنام نجاتی
  • 2 مارس 2016

آخرین دیدگاه های ساخت باکس اسکرول دار با css

نظرات بسته
اگر نياز به پشتيباني داريد همين حالا با ما تماس بگيريد . تيم پشتيباني رهجو نت بصورت 24 ساعته در خدمت شماست...