تبلیغات
طراحی و بهینه سازیمشاهده
سرور مجازی
هاست

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

جی کوئری , متفرقه

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

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

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

حتما فکر کردید که ساخت چنین باکس اسکرول داری حتما نیازمند نوشتن کد های 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 برای جلوه دادن به اسکرول باکس ساخته شده استفاده کنید.

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

دانلود

حراج محدود 59 افزونه فارسی فقط 59 هزارتومان ( قیمت تک فروش 590 هزارتومان )


مارکیو | طراحی حرفه سایت،سئو و بهینه سازی سایت


مطلب مفیدی بود ؟
نویسنده : mohammad 0 جی کوئری , متفرقه

لینک کوتاه مطلب : https://www.20script.ir/?p=42073

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
10,248افزونه ویرایش تگ های هدر و فوتر پوسته وردپرس Head Cleaner تاریخ : 1394/12/9
8,161افزایش سرعت سایت وردپرسی با افزونه W3 Total Cache + آموزش تاریخ : 1394/11/24
3,449دکمه های بسیار زیبای CSS3 تاریخ : 1392/08/4
18,028ساخت اشکال هندسی مختلف با استفاده از CSS3 تاریخ : 1394/04/23
8,479تگ های بسیار زیبا با CSS 3 تاریخ : 1392/07/29
6,326افزونه وردپرس All in One SEO Pack Pro نسخه 2.4.8 تاریخ : 1395/04/23
3,194دانلود اطلاعیه های بسیار زیبای CSS3 تاریخ : 1392/09/23
3,215افزونه سئو وردپرس All in One SEO Pack Pro نسخه 2.4.11.4 تاریخ : 1395/11/17
5,850اجرای موسیقی آنلاین در وردپرس با افزونه HTML5 Music Player تاریخ : 1393/06/25
3,431ساعت بسیار زیبای CSS3 تاریخ : 1392/08/22
300دانلود مجموعه افکت های CSS به صورت شناور bequeen تاریخ : 1398/02/29
65,903افزونه اسلایدر رولوشن Slider Revolution نسخه 5.4.8.3 + افزودنی ها تاریخ : 1397/12/8
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب