نگهداری وضعیت اسکرول ها در رفت و برگشت صفحات به سرور (در ASP.NET و سایر زبانهای تحت وب)

تصویر مهدی

در صفحات وب، هنگامی که صفحه عملیات رفت و برگشت به سرور را انجام می دهد (یا اصطلاحا PostBack می شود)، موقعیت اسکرول صفحه و تمام المنتهای موجود در صفحه از بین خواهد رفت. در ASP.NET 2 به سادگی و با استفاده از ویژگی MaintainScrollPositionOnPostBack میتوان موقعیت اسکرول صفحه را حفظ کرد ولی برای حفظ موقعیت اسکرول سایر المنتهای موجود در صفحه (مانند TextBoxهای چند خطی، ListBoxها، Panelها و ...) چنین امکانی وجود ندارد. این موضوع در هنگام استفاده از UpdatePanel بیشتر نیز جلب توجه میکند. من برای حل این مساله، راه حل ساده ای پیدا نکردم و بنابراین خودم دست به کار شدم و نتیجه کار اسکریپتی شد که در اینجا آنرا ارایه کرده ام.

طرز کار اسکریپت

این اسکریپت قبل از ارسال اطلاعات به سرور، موقعیت تمام اسکرول ها (اسکرول صفحه و تمام المنتهای دارای اسکرول موجود در صفحه) را در کوکی ذخیره کرده و در هنگام برگشت صفحه این موقعیت را بازیابی می کند. بنابراین دیگر نیازی به استفاده از ویژگی MaintainScrollPositionOnPostBack نیز نخواهید داشت. در صورت استفاده از MS AJAX، این اسکریپت آنرا شناسایی کرده و عمل ذخیره و بازگرداندن موقعیت اسکرول ها را حتی هنگام استفاده از UpdatePanel نیز فراهم میکند. هرچند من این اسکریپت را تنها در صفحات ASP.NET تست کرده ام، اما از آنجا که این اسکریپت تنها از امکانات سمت کلاینت استفاده میکند، انتظار میرود این اسکریپت در صفحات ایجاد شده توسط سایر زبانهای برنامه نویسی تحت وب (مانند PHP، JSP، Ruby و ...) نیز بدون هیچ مشکلی کار کند.

سازگاری با مرورگرها

من این اسکریپت را توسط چندین مرورگر مختلف تست کردم. این مرورگرها شامل فایرفاکس از نسخه 2 به بعد، اینترنت اکسپلورر از نسخه 6 به بعد، اپرا نسخه 9.6، کروم نسخه 1 و سافاری نسخه 3.2 است. حدس میزنم که این اسکریپت با سایر مرورگرهای موجود نیز مشکلی نداشته باشد ولی برای من در حال حاظر تنها امکان تست این مرورگرها فراهم بود.
تنها مشکل در تست ها این بود که در مرورگر اپرا و اینترنت اکسپلورر نسخه 6 (به علت وجود باگ در این دو مرورگر) امکان دریافت موقعیت اسکرول المنت select (معادل ListBox در ASP.NET) وجود ندارد و بنابراین این دو مرورگر، موقعیت اسکرول این المنت را حفظ نمیکنند. ظاهرا هیچ راه حلی شناخته شده ای برای این مشکل وجود ندارد.

شیوه استفاده

این اسکریپت در دو نسخه عادی و فشرده وجود دارد. نسخه عادی برای مطالعه و احیانا رفع ایرادات و شخصی سازی ارایه شده است و برای استفاده در صفحات وب، نسخه فشرده شده پیشنهاد می شود. برای استفاده کافیست تنها یک ارجاع به این اسکریپت در فایل خود (در هر کجای فایل) اضافه کنید. این اسکریپت سایر کارها را خود انجام خواهد داد!

    <script type="text/javascript" src="scrollsaver.min.js"></script>

دقت کنید که این اسکریپت برای حفظ موقعیت اسکرولها، از id آنها استفاده میکند. بنابراین در مورد کنترلهای خود ASP.NET مساله خاصی وجود ندارد، ولی در مورد تگهای HTML که در صفحه استفاده میشود (مثل div، textarea و ...) دقت کنید که حتما شامل ویژگی id باشد و همچنین توصیه میکنم در این حالت، ویژگی "runat="server را نیز برای این تگها اضافه کنید تا جلوی ایجاد idهای تکراری در صفحه نیز گرفته شود.

ضمیمه

در اینجا دو نسخه از اسکریپت (نسخه عادی و نسخه فشرده شده) و همینطور یک پروژه ASP.NET نمونه که در آن از این اسکریپت استفاده شده است را ضمیمه کرده ام.

ضمیمهاندازه
نسخه فشرده شده اسکریپت894 بایت
نسخه عادی اسکریپت1.03 کیلو بایت
پروژه نمونه56.76 کیلو بایت