• آموزش ساخت سایت و رساندن آن به درآمد

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

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

راستی! برای دریافت مطالب وردپرسی در کانال تلگرام میهن وردپرس عضو شوید.

آنلاین یاد بگیرید

نظرات کاربران

  1. 7 اسفند 1396 ساعت 17:50

    سلام.. افزونه یی نیست که در داخل صفحات بشه اینو ساخت..چون تو صفحه اصلی من میخوام که یک جایی باشه برای لینکهای مختلف…ونمیشه اینجوری که شما گفتید ساخت چون کل صفحه مد نظرم نیست
    ممنون میشم راهتمایی بفرمایید.

  2. 29 آذر 1396 ساعت 23:45

    من یه سوال داشتم استاد .. میخام برای دکمه های next و previous مطالب منوهای دیکر رو هم تعریف کنم… یعنی وقتی next میزنم داخل همون صفحه و همون باکس اسکرول؛ مطالب سرفصل های دیگه هم نشون داده بشه …

    • محمد قاسمی
      30 آذر 1396 ساعت 09:42

      درود.
      باید کدنویسی اختصاصی انجام بدید و یا یک افزونه پیدا کنید، این کار رو براتون انجام بده.
      می توانید با بخش طراحی برای طراحی اختصاصی نیز در تماس باشید از طریق آی دی تلگرام : @mihanwp_design

  3. 29 آذر 1396 ساعت 23:39

    شما تو آموزش بی نظیرید… سپاس

  4. 12 تیر 1396 ساعت 19:52

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

    • رضا حسینی راد
      13 تیر 1396 ساعت 11:49

      توی گوگل سرج کنید رسپانسیو کردن سایت. توی پکیج صفر تا صد طراحی سایت هم توضیح دادیم

  5. 4 تیر 1396 ساعت 19:44

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

  6. 15 دی 1395 ساعت 22:20

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

  7. 5 آذر 1395 ساعت 00:50

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

  8. 23 آبان 1395 ساعت 14:20

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

enamad