یادداشت‌ها

»

بازی با پیمایش گر صفحه و نوار آن در جی کوئری

1. پیمایش بی پایان

برای نمایش موارد (لیست اطلاعات، پست‌های سایت و ...) معمولا از روش Pagination (صفحه‌بندی) استفاده می‌شود. اما یک روش کاربرپسند، این است که با نزدیک شدن صفحه به انتهای لیست، به صورت اتوماتیک محتویات بعدی برای کاربر لود شود. این روش در بسیاری از سایت‌های مشهور (مثل پلاس، پین‌ترست و ...) دیده می‌شود.
به این روش، اسکرول بی‌پایان یا infinite scroll یا endless scroll گفته می‌شود که با جستجوی این کلمات، می‌توان به موارد زیادی که از اینگونه اسکریپت‌ها در اینترنت هست، دست پیدا کنید.
اساس این روش بر مبنای رویداد (event) اسکرول است. با هر بار اسکرول، ارتفاع صفحه و موقعیت اسکرول محاسبه می‌شود و در صورتی که کاربر تا انتهای صفحه، کمتر از مقدار معینی (مثلا 100px) فاصله دارد، برنامه متوجه می‌شود که کاربر به انتهای صفحه نزدیک شده و لذا محتویات بعدی را بارگذاری می‌کند...

var ajaxIsWorking=false, PAGE=1;
$(window).scroll(function(){
  if(!ajaxIsWorking && $(window).scrollTop() >= $(document).height()-$(window).height()-100){
    ajaxIsWorking = true;
    PAGE++;
    $.ajax({
      data: {page: PAGE, ...}
      ...
      success: function{
        ...
        ajaxIsWorking=false;
      }
    });
  }
  return true;
});

البته دقت کنید که در ابتدای صفحه، حتما باید DOCTYPE تعریف شده باشد در غیر اینصورت، height صفحه به درستی محاسبه نمی‌شود و در نتیجه کد فوق درست عمل نمی‌کند.
آنچه در بالا گفته شد، مبنای کار اسکرول بی‌پایان بود و کد فوق هم بدون مشکل کار می‌کند. اما پلاگین‌های زیادی هم در این زمینه نوشته شده که امکانات بیشتری به اسکرول‌بی‌پایان می‌دهد. Infinite Ajax Scroll یکی از آنهاست که شماره صفحه لود شده را به آدرس اضافه می‌کند...

2. جایگزین کردن نوار پیمایش

گرافیست‌ها در طرح‌های خود، باکس‌ها را با متونی با حجم مناسب پر می‌کنند در حالی که در عمل، متونی که توسط مدیر وارد می‌شود، گاهی بلندتر از گنجایش آن باکس است. برای رفع این مشکل، چند راه حل وجود دارد. یکی این است که در سمت سرور (مثلا توسط php یا در خود کوئری SQL) آن رشته برش زده شود و تعداد کاراکتر یا کلمه خاصی (مثلا 100 کلمه) به عنوان نتیجه به صفحه کاربر ارسال شود. این کار علاوه بر آنکه بار اضافه‌ای را به سرور تحمیل می‌کند، چندان دقیق عمل نمی‌کند. روش بهتر استفاده از js برای برش است که پلاگین dotdotdot یک نمونه خوب از آن است (نمونه)
اما در هر دو روش فوق، متن اضافی از دست می‌رود یا پنهان می‌شود. روش بهتری که شخصا زیاد استفاده می‌کنم، استفاده از پلاگین jQuery custom content scroller است که نسبت به بقیه مواردی که دیدم، جالب‌تر و کامل‌تر بود و در وسایل لمسی هم بخوبی کار می‌کند. با کمک این پلاگین شما می‌توانید به یک کادر با ارتفاع یا عرض محدود و معین، یک اسکرول ظریف و شکیل اضافه کنید. پلاگین Scroller نیز عملکردی مشابه دارد.

3. رسیدن اسکرول به یک حد خاص

این مطلب کاربردهای زیادی دارد. مثلا ممکن است بخواهیم افکت ظاهر شدن یا انیمیشن یک div خاص، پس از رسیدن اسکرول به آن شروع شود (مثل wow.js). یا زمانی که اسکرول به حد خاصی رسید، یک تصویر بارگذاری شود و کاربردهای دیگر...

این کار نیز به کمک جاوا اسکریپت به سادگی میسر است که jQuery viewport checker یک نمونه پلاگین در این زمینه است و می‌تواند برای کاربردهای مشابه به شما ایده بدهد.

پلاگین Promo Slide نیز یک نمونه دیگر آن است که حتما نمونه‌اش را در سایت‌های دیگر به صورت عملی دیده‌اید. با کمک این پلاگین می‌توان زمانی که اسکرول صفحه به انتهای مطلب رسید، یک لینک/متن از کنار صفحه به صورت انیمیشن ظاهر کرد تا به کاربر پیشنهاد یا مطلب خاصی را یادآور شود و به نوعی، توجه کاربر را کاملا جلب کند...

ScrollMe نیز پروژه جدید مشابهی است که امکان ایجاد انیمیشن بر روی یک المان در صورت ورود به محدوده دید کاربر (viewport) یا خروج از آن را به سادگی تمام فراهم کرده است.

stroll.js نیز یک اسکریپت سبک و غیروابسته به جی‌کوئری است که در اسکرول یک لیست که overflow ی آن مانع نمایش تمام آن شده، با رسیدن اسکرول به ناحیه مورد دید، آن المان‌ها را با افکت‌های جالبی ظاهر می‌کند.

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

در نمایشگرهای موبایل و تبلت، به دلیل محدودیت فضا، زمانی که کاربر دستش را از روی صفحه برمی‌دارد، اسکرول مخفی می‌شود. این امر در اکثر صفحات امری مطلوب است اما در صفحاتی که حاوی مقدار زیادی متن هستند (مثل مقالات یا مثلا یک خبر/گزارش طولانی) کاربران اینترنت (که متاسفانه اغلب‌شان روحیه شتاب‌زدگی پیدا می‌کنند) دوست دارند بدانند که چه مقدار از متن را خوانده‌اند و چه مقداری دیگر باقی مانده است؟
پلاگین‌هایی در این خصوص تهیه شده که عملکردشان به این صورت است که بالای صفحه، یک نوار بسیار باریک نشان می‌دهند که width آن متغیر است و زمانی که کاربر ابتدای متن است، عرض آن مثلا 10% است و زمانی که کاربر مقدار بیشتری را می‌خواند، عرض آن 20% می‌شود و ... تا زمانی که به انتهای متن می‌رسد، width آن نوار هم به 100% می‌رسد. Scrolline یک نمونه معروف از این دسته پلاگین‌هاست.

5. سبک کردن لیست بسیار بزرگ با Clusterize.js

این مورد شبیه مورد شماره 3 است اما به دلیل اهمیت و زیبایی کاری که انجام شده، آن را به صورت یک مورد جدا معرفی می‌کنم. زمانی که یک جدول یا لیست بسیار بزرگ مثلا 500 هزار تایی داشته باشیم نمایش آن در صفحه برای کاربر همراه با لگ(lag) انجام می‌شود یعنی کاربر هر زمان که می‌خواهد از بخشی از لیست به بالا یا پایین اسکرول کند، حس می‌کند که سیستم‌ش یک لحظه گیر یا قفل می‌کند و دیر پاسخ می‌دهد. دلیل این سنگینی، سنگین بودن DOM است که المان‌های بسیار زیادی دارد.

ایده زیبایی که Clusterize.js آن را پیاده کرده این است که همه این 500 مورد را در جاوا اسکریپت تعریف می‌کنیم و به DOM اضافه نمی‌کنیم. حال زمانی که کاربر اسکرول می‌کند، حسب موقعیت اسکرول، المان‌هایی که الآن باید دیده شود (مثلا 10~20 مورد) را به DOM اضافه می‌کنیم. نمونه پیاده شده این فکر تحسین برانگیز را در صفحه Clusterize.js می‌توانید مشاهده کنید.

---

یادداشت‌های مرتبط

1. لینک اسکرول به بالای صفحه
2. ارتفاع اتوماتیک ورودی متن جهت حذف اسکرول
3. پیمایش و منو برای یک صفحه