ثبت‌نام ورود

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

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

مسلماً در هر کسب‌وکار اینترنتی مدیران سایت به این تمایل دارند که سفارشی‌سازی‌های خودشان را در سایت خود اعمال کنند. این مرحله به روش‌های مختلفی قابل انجام است و مدیران می‌توانند با استفاده از یک سری روش سایت خودشان را سفارشی‌سازی کنند. برای ساخت باکس اسکرول دار کافیست کمی با HTML و CSS آشنایی داشته باشید.

اگر شما به‌عنوان مدیر یک سایت اینترنتی با زبان‌های برنامه‌نویسی آشنایی ندارید؛ پس به شما پیشنهاد می‌کنیم جهت پیشرفت سایت خود حتماً در این زمینه مهارت لازم را کسب کنید. چراکه شما با استفاده از این زبان‌ها قادر هستید سایت خود را گسترش دهید. همچنین می‌توانید هرگونه امکانات و قابلیت‌‌های دلخواه خود را در سایت خود قرار دهید.

سیستم وردپرس به‌عنوان یک سیستم متن‌باز به شما امکان این را می‌دهد که تغییرات دلخواه خودتان را با استفاده از روش‌های گوناگون در آن انجام دهید. این تغییرات می‌تواند با استفاده از افزونه و یا کد باشد. البته اگر شما با کد نویسی آشنا باشید می‌توانید سایت خود را از دیگر سایت‌ها متمایز کنید. CSS اضافی به شما این امکان را می‌دهد که در سایت خود چیزهایی را کم و یا برخی از امکانات دلخواه خود را به سایتتان اضافه کنید.

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

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

یکی از قابلیت‌هایی که CSS اضافی در اختیار شما قرار می‌دهد این است که شما توسط آن می‌توانید در سایت خود باکس اسکرول دار قرار بدهید. زمانی که شما با استفاده از CSS این کار را انجام دهید، دیگر نیاز نیست که از هیچ‌گونه افزونه‌ای استفاده کنید.

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

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

این باکس به شما کمک می‌کند محتوای دلخواه خودتان را درون آن قرار دهید. به‌این‌ترتیب به دلیل ساختاری که این باکس دارد کاربر را به سمت خود جذب می‌کند. شما می‌توانید محتوایی که قصد دارید مخاطب سایت شما به آن توجه کند را درون این باکس قرار داده و بازدید سایت خودتان را از این طریق بالا ببرید.

چطور محتوا را اسکرول دار کنیم؟

حتماً شما هم فکر می‌کنید که ساخت چنین باکس اسکرول داری نیازمند نوشتن کدهای Jquery است. اما درحقیقت این‌طور نیست. شما این کار را با کدهای css هم می‌توانید انجام بدهید. برای انجام این کار تنها کافی است مطابق با این آموزش عمل کنید.

در قدم اول Div موردنظر خودتان را بسازید. بعد از ساخت Div باید یک کلاس به Div موردنظر بدهید. به‌عنوان‌مثال اگر قصد دارید یک باکس با پس‌زمینه خاکستری با کد رنگ #ddd و پهنای ۲۰۰ پیکسل و ارتفاع ۲۰۰ پیکسل بسازید. برای انجام این کار کد زیر را در HTML قالب سایت خودتان بنویسید.

<div class="mihanwp-box">
یه سری محتوا اینجا
</div>

در مرحله بعد کد CSS زیر را نیز داخل فایل CSS قالب سایت خود قرار بدهید. در نظر داشته باشید که درصورتی‌که سایت شما وردپرسی است؛ باید این کد را در Style.css قالب وردپرس خود قرار بدهید.

.mihanwp-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 برای جلوه دادن به اسکرول باکس ساخته‌شده استفاده کنید. درواقع افزونه‌ها به شما کمک می‌کنند بتوانید تغییرات بیشتری را در این باکس‌ها ایجاد کنید و آن‌ها را تبدیل به چیزی کنید که واقعاً در سایت خود به آن‌ها نیاز دارید.

شما می‌توانید این دو افزونه را به‌صورت رایگان دریافت کرده و در سایت خود نصب و راه‌اندازی نمایید. در نظر داشته باشید که شما با انجام برخی جزئیات می‌توانید کاری کنید که بازدهی سایتتان افزایش یابد و کاربران بیشتی را به سمت خود جذب کنید.

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

نظر شما در این‌باره چیست؟

  1. کاربر مهمان ۲۷ دی ۱۳۹۷

    سلام
    ممنون از آموزش تون

  2. کاربر مهمان ۰۷ اسفند ۱۳۹۶

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

  3. کاربر مهمان ۳۰ آذر ۱۳۹۶

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

    • U7658 ۳۰ آذر ۱۳۹۶

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

  4. کاربر مهمان ۳۰ آذر ۱۳۹۶

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

  5. کاربر مهمان ۱۳ تیر ۱۳۹۶

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

    • رضا حسینی راد رضا حسینی راد ۱۳ تیر ۱۳۹۶

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

  6. کاربر مهمان ۰۵ تیر ۱۳۹۶

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

  7. کاربر مهمان ۱۶ دی ۱۳۹۵

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

  8. کاربر مهمان ۰۶ آذر ۱۳۹۵

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

  9. کاربر مهمان ۲۴ آبان ۱۳۹۵

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