• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

custom-content-scroller : پلاگین jQuery برای ویرایش ظاهر scrollbar

21 2131 ۲۳ بهمن ۹۳

در این مطلب میخوام یک پلاگین jQuery بنام custom-scrollbar رو خدمت شما معرفی کنم و اونو آموزش بدم.

custom-scrollbar

با استفاده از این پلاگین میتونین به راحتی هر چه تمامتر ظاهر اسکرول بار کل سایتتون و همچنین هر المنتی که نیاز به اسکرول داره رو عوض کنید. همچنین با استفاده از این پلاگین میتونین امکانات پیشرفته ای مانند Touch و استفاده از Keyboard و Mouse Wheel و ... رو اضافه کنید. پشتیبانی این پلاگین از انواع مرورگرها خیلی خوبه و میتونین با اطمینان خاطر از اون استفاده کنید.

میبینید که ظاهر اسکرولبار عوض شده و با اسکرول کردن اون المنت ، محتوای اون با حالت زیبایی جابجا میشن.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به jQuery و jquery.mCustomScrollbar.concat.min.js و jquery.mCustomScrollbar.min.css نیاز داریم. من این فایلهارو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم.

من برای مثال یک div با id = sample ساختم و برای اینکه اسکرول رو امتحان کنم ، محتوای زیادی رو درون اون قرار دادم. از اینجا به بعد باید از پلاگین و امکاناتی که در اختیارمون میزاره استفاده کنیم. من عرض و ارتفاع div رو میخوام با استفاده از پلاگین مشخص کنم.

میبینید که اول با استفاده از jQuery المنت مورد نظر رو انتخاب کردیم ، بعد از اون متد mCustomScrollbar رو برای اون فراخوانی کردیم. این متد ، ویژگی های فراوانی رو داره که در بالا دو موردش رو بیان کردم. با استفاده از ویژگی setHeight و setWidth میتونین ارتفاع و عرض المنت مورد نظر رو مشخص کنید. در زیر مهمترین ویژگی های این پلاگین رو براتون قرار دادم.

  •  theme : با استفاده از این ویژگی میتونین ظاهر مورد نظرتون رو انتخاب کنید. لیست کامل تم ها رو در این صفحه میتونین ببینید.
  • autoHideScrollbar : اگر true باشه اسکرولبار مخفی هست و هر زمان که ماوس روی المنت بره ، ظاهر میشه
  • autoExpandScrollbar : اگر true باشه زمانی که روی اسکرولبار هاور کنید ، عرض اون بزرگتر میشه
  • mouseWheel : اگر این خاصیت رو فعال کنید ، با استفاده از Mouse Wheel که که بین دو کلیک راست و چپ هست ، میتونین اسکرول کنید. برای فعال کردن بصورت زیر عمل کنید :
  • scrollButtons : اگر true قرار بدین ، دکمه های بالا و پایین اضافه میشه ، بصورت زیر :
    scroll1
  • keyboard : اگر true قرار بدین ، با استفاده از کلیدهای بالا و پایین و راست و چپ و Pade Down و Page Up میتونین اسکرول کنید
  • contentTouchScroll : با استفاده از این ویژگی میتونین خاصیت Touch رو برای وسایلی که لمسی هستند فعال کنید

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 21 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    سلام ببخشید اگر بخواهیم تعییرات شخصی(استایل) به اسکرول بدهیم از چه کدی باید استفاده کنیم؟
    آیا میشه به تگ overflow:scroll استایل بدیم ، بدون استفاده از جی کوئری ؟
    یا حق

    • ‏‏
      محمد اسفندیاری(۱۰ فروردین ۱۳۹۴)

      برای اینکه اسکرول رو به استایل مد نظر خودتون تبدیل کنید ، میتونین به سایت این ابزار برید و به پایین اسکرول کنید و قسمت Scrollbar styling & themes رو مطالعه کنید…..در اونجا همچنین یک تصویر قرار داده و نام هر قسمت از اسکرولبار رو نوشته

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

  • ‏‏

    سلا
    خسته نباشید.
    یک سوال دارم :
    چه جوری می تونم آخرین مطالب سایت رو به صورت اسکرول بار به نمایش در بیارم؟
    باتشکر

  • ‏‏

    سلام
    من می خواهم آخرین مطالب سایتمو این شکلی کنم http://uupload.ir/files/f9co_capture.jpg
    لطفا کمک کنید چون به هر سایتی رفتم نتونستم چیزی پیدا کنم. :roll:

  • ‏‏

    بله واقعا قشنگن
    ولی من آشنایی چندانی با توابع آخرین مطالب وردپرس ندارم :sad:
    لطفا اگه می شه بیشتر راهنمایی کنید
    باتشکر

  • ‏‏
    Pouriya Ariyafar(۱۴ خرداد ۱۳۹۵)

    سلام اقای اسفندیاری
    ممنون برای این اموزش
    من از این استفاده کردم ولی نمیدونم چرا اسکرولم سمت چپ محتوا رفت
    هر کاری هم کردم نشد سمت راست محتوا بره، ب نظر شما مشکل از چی میتونه باشه؟
    direction هم چپ و راست، راست و چپ کردم فرقی نکرد

    • ‏‏
      محمد اسفندیاری(۱۴ خرداد ۱۳۹۵)

      میشه کدهاتون رو زیپ کنید و بفرستید؟

      • ‏‏
        Pouriya Ariyafar(۱۴ خرداد ۱۳۹۵)

        کدهاش وبلاگی هست html خالی نیس
        این ادرس رو لطفا نگاه کنید من اینجا قالب تست میکنم site

        یک چیز عجیب برخوردم اقای اسفندیاری
        ویژگی scrollButtons برای این بود که کلیک بالا و پایین برای اسکرول کردن رو مشخص میکرد وقتی true بود یعنی فعاله (لطفا عکس رو نگاه کنید) من همین کد بالایی یعنی کدهای شما رو استفاده کردم و درون اون کدهاویژگی scrollButtons فعاله یعنی true ولی اون دکمه ها در قالب نیستند

        http://bayanbox.ir/view/5590420950430723057/gh1.jpg

        چون کدها وبلاگی هس نفرستادم، اگر لازمه بگید حتما میفرستم
        مممنون برای پاسختون

        • ‏‏
          محمد اسفندیاری(۱۴ خرداد ۱۳۹۵)

          تو کدهاتون setHeight: 100%;, رو قرار دادین……اون ; رو باید حذف کنید…اشتباهی وارد کردید

  • ‏‏
    Pouriya Ariyafar(۱۵ خرداد ۱۳۹۵)

    درستش کردم
    700 هم گذاشتم ولی فرقی نکرد
    http://bayanbox.ir/view/1363308702460400011/5342.jpg

    • ‏‏
      محمد اسفندیاری(۱۵ خرداد ۱۳۹۵)

      نمیدونم چرا ولی دو تا تگ a با کلاسهای mCSB_buttonUp و mCSB_buttonDown اضافه نمیشه!!

      • ‏‏
        Pouriya Ariyafar(۱۵ خرداد ۱۳۹۵)

        اره
        دیدم این دو تا تگ اجرا نمیشن
        میشه دستی وارد کرد؟؟

        • ‏‏
          محمد اسفندیاری(۱۵ خرداد ۱۳۹۵)

          نه نمیشه
          مشکل رو پیدا کردم
          شما اول اون تصویر mCSB_buttons.png که در فایل zip قرار داره رو به همونجایی که فایل Css وجود داره، آپلود کنید
          بعدش اون کدهای JS رو آخر بزارین و onload رو بردارید…بصورت زیر:
          (function($) {
          $(".content-wrp").mCustomScrollbar({
          setHeight: 700,
          setWidth: 500,
          theme: "rounded-dots-dark",
          autoHideScrollbar: false,
          autoExpandScrollbar: true,
          scrollButtons: {
          enable: true
          },
          keyboard: {
          enable: true
          },
          contentTouchScroll: 25
          });
          })(jQuery);

    • ‏‏
      محمد اسفندیاری(۱۵ خرداد ۱۳۹۵)

      این تصویر mCSB_buttons.png رو آپلود کردید و در همونجایی که فایل css هست قرار دادین؟

      • ‏‏
        Pouriya Ariyafar(۱۵ خرداد ۱۳۹۵)

        من اصلا تصویری اپلود نکردم، کلا 3 تا فایل برای این اپلود کردم، همون هایی که در فایل زیپ شده این پست شما قرار دادید،
        jquery.mCustomScrollbar.concat.min.js
        jquery.min.js
        jquery.mCustomScrollbar.css

        کدهایی که قرار دادم

        • ‏‏
          محمد اسفندیاری(۱۵ خرداد ۱۳۹۵)

          یک تصویر هم در اون فایل زیپ هست که آیکونا توش قرار داره

  • ‏‏
    Pouriya Ariyafar(۱۵ خرداد ۱۳۹۵)

    دمت گرم محمد جان که با خونسردی و کامل جواب من رو دادی
    مرسی
    ان شالله همیشه شاد و موفق باشی رفیق

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram