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

3.8 / 5. تعداد رای: 11

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

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

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

نکته خاصی هست که این مقاله رو تکمیل‌تر کنه؟

  1. U334823 ۶ اسفند ۱۴۰۲

    سلام من در وبسایتم به مشکل عجیبی برخوردم
    هم خودم و هم یکی از کاربران گفته بود که سایت به سمت پایین اسکرول نمیشه، چه در صفحه اصلی و چه در مقالات آدرس ممنون میشم بگید مشکل از کجاست؟

  2. U10165 ۱۳ آذر ۱۴۰۲

    باسلام
    من می خواهم در المنتور یک ستون را به صورت div تعریف کنم و سپس به آن حالت اسکرول بدهم، تا وقتی محتوای ستون بیش از 300 پیکسل شد، حالت اسکرول بگیرد، ستون را از قسمت طرح بندی تگ div داده ام، حالا در قسمت پیشرفته دو قسمت داریم: id css و class css لطفا از این قسمت به بعد را توضیح میدهید که چطور به وردپرس بگویم که این کد مربوط به این ستون است؟ این را هم عنوان کنم المنتور ساده است و من باید کدها را در قسمت body فایل style.css قرار دهم.

    • Reza Rad رضا راد ۱۴ آذر ۱۴۰۲

      سلام باید آیدی یا کلاس ستون رو پیدا کنید و به سی اس اس سفارشی خودتون مسیر بدید. هر المنت یه ایدی یا کلاس داره. توی همون سفارشی هم میتونید کلاس یا ایدی خودتون بهش بدین.

  3. U42564 ۵ شهریور ۱۴۰۰

    سلام
    مهندس جان آقای حسینی راد واقعا کاربردی و مهم بود . سریع اول گوگل آمد مطلب و سریع در کمتر از 15 ثانیه کارمو راه نداخت.
    واقعا خوشحال شدم و بخاطر همین که این نظر رو بذار ثبت نام کردم.
    فقط اگر یک بخش برای فیوریت کردن این مطالب بذارید توی سایت خیلی خوب میشه . یک سری قابلیت های ریز که بدرد برخی کاربراتون شاید بخورن. من خودم این مطلب رو دوست داشتم بوکمارک کنم و در حساب کاربری در همین سایت بتونم در آینده ببینم.
    البته در وبسایت خودم هم این قابلیت و نمونه قابلیت های ریز دیگه اضافه کردم. و انتظار دارم میهن وردپرس هم این نمونه قابلیت ها رو داشته باشه و بهشون توجه بکنه.

  4. U35882 ۲۷ اردیبهشت ۱۴۰۰

    سلام
    چطوری اون اسکرول بار رو ویرایش کنیم؟
    مثلا بیایم عرض و ایناش رو تغییر بدیم؟

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

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

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

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

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

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

    • U7658 ۳۰ آذر ۱۳۹۶

      درود.
      باید کدنویسی اختصاصی انجام بدید و یا یک افزونه پیدا کنید، این کار رو براتون انجام بده.

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

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

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

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

    • Reza Rad رضا راد ۱۳ تیر ۱۳۹۶

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

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

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

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

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

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

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

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

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