ارزدیجیتال
حراجی دامنه های ویژهمشاهده





پلتفرم رپورتاژ آگهی و بک لینک تسمینو
تبلیغات
تبلیغات
تبلیغات تبلیغات
تبلیغات ژاکت, مرجع خرید قالب و افزونه وردپرسی اورجینال

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

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

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

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

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

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

<div class="bistscript-box">
بیست اسکریپت با هدف ایجاد یک مرجع کامل در زمینه اسکریپت از سال 1392 با 6 سال سابقه درخشان در صنعت وب ایران برای یک شروع تازه پا به عرصه وب گذاشت. ما در بیست اسکریپت سعی می کنیم همواره به نیاز های شما کاربران عزیز در زمینه وردپرس فارسی پاسخ دهیم. قصد داریم به شما کمک کنیم تا سایتی پر قدرت راه اندازی کنید .
</div>

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

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

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

 

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

 

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

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

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 3 / 5. تعداد رای : 5

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 جی کوئری , متفرقه
لینک کوتاه مطلب : https://www.20script.ir/?p=42073
کلمات کلیدی پست :
مطالب مرتبط
12,645فرم جستجو به صورت CSS , جی کوئری + PSD تاریخ : 2013/12/27
11,205دانلود منوی زیبای نیم دایره CSS3 تاریخ : 2013/10/24
14,287اسلایدر جدید و حرفه ای CSS3 تاریخ : 2013/11/14
12,316دانلود مجموعه افکت های CSS به صورت شناور bequeen تاریخ : 2019/05/19
29,037افزایش سرعت سایت وردپرسی با افزونه W3 Total Cache + آموزش تاریخ : 2016/02/13
28,812طراحی قالب HTML به صورت آنلاین با اسکریپت Architect نسخه 2.1.5 تاریخ : 2019/05/9
13,008اسکریپت پشتیبان گیری وب سایت SmartBackup نسخه 1.1.2 تاریخ : 2016/08/15
11,111اسکریپت ایجاد گالری عکس PiGallery تاریخ : 2018/03/4
12,988ایجاد حالت های انیمیشنی متحرک با افزونه وردپرس Animate It تاریخ : 2019/06/23
12,808منوی بسیار زیبای ایکون دار به صورت CSS3 تاریخ : 2014/07/21
13,275قالب سایت شخصی My Story نسخه HTML تاریخ : 2014/08/22
11,759دانلود افکت زیبا و حرفه ای CSS3 تاریخ : 2013/11/30
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file