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

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

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

تیم تولید محتوا

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