web-design

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

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

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

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

div-scroll

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

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

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

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

برای طرح دادن به اسکرول کناری باکس می توانید از Tiny Scrollbar استفاده کنید. اگر سایت وردپرسی دارید می توانید از افزونه wp awesome srollbar برای جلوه دادن به اسکرول باکس ساخته شده استفاده کنید.

موفق و سربلند باشید ?

در اینستاگرام ما: تخفیف بگیرید ٬ انرژی بگیرید و یک کسب و کار اینترنتی عالی راه اندازی کنید.فالو می کنم

پکیج های آموزشی

پیشنهاد می کنیم
نظرات کاربران
  • درخواست شما پس از تایید در سایت نمایش داده می شود. از ارسال پرسش تکراری خودداری نمایید.

avatar
مرتب سازی براساس:   جدیدترین | قدیمی ترین
morteza
morteza

سلام
چجوری میتونم این باکس اسکرول ریسپانسیو کنم سایز مانیتور کوچیک تغییر نمیکنه

افزایش بازدید کانال
افزایش بازدید کانال

سلام
ممنون از شما انجام دادم و درست شد

امین
امین

باسلاماستاد، این اسکرول رو چجوری میتونم بیارم سمت راست باکس؟الان خودش سمت چپه …ممنون

reza
reza

سلام بستگي به مرورگر داره

armin21
armin21

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

رضا حسینی راد
رضا حسینی راد

سلام خب توی باکس اسکرول دار نمایش ندید :دی

armin21
armin21

ببخشید پس چه طور نمایش بدم بخوام بغل صفحه نمایش بدم 

رضا حسینی راد
رضا حسینی راد

خب باید کد های نمایش آخرین مطالب وردپرس رو قرار بدید. توی بخش کدهای وردپرس آموزشش رو قرار دادیم

armin21
armin21

سلام لینکشو لطفا برام میزارید متشکرم

رضا حسینی راد
رضا حسینی راد
حسن
حسن

سلام ببخشید من یه باکس جعبه اخرین مطالب سایت برای قالب وبسایت دورس میکنم اما موقعی که با مرورگر ان را زوم میکنم یا از زوم در میارم این باکسم جا بجا میشه چکار کنم میشه جواب برام ایمیل کنید

رضا حسینی راد
رضا حسینی راد

سلام قالبتون چی هست؟ ظاهرا مشکل رسپانسیو داره

wpDiscuz