متد scrollLeft در جی کوئری

در این راهنما با متد scrollLeft در jQuery آشنا می شوید؛ روشی ساده برای خواندن یا تغییر موقعیت اسکرول افقی یک عنصر HTML. این متد زمانی به کار می آید که محتوای یک بخش از عرض قابل مشاهده آن بیشتر باشد و کاربر بتواند با حرکت افقی، قسمت های پنهان را ببیند. با چند مثال کاربردی، شیوه استفاده از حالت تنظیم و حالت دریافت مقدار را بررسی می کنیم.

در این بخش از آموزش JQuery، متد scrollLeft را شرح می دهیم. اگر به دنبال خدمات طراحی سایت هستید، این لینک شما را به وب سایت پارس سافت هدایت می کند.

متد scrollLeft برای عنصر HTML انتخاب شده، موقعیت اسکرول افقی را تنظیم می کند یا مقدار فعلی آن را برمی گرداند. در نتیجه می توانید بدون تغییر محتوای عنصر، محل نمایش آن را در راستای افقی جابه جا کنید. این قابلیت برای نوارهای پیمایش، گالری تصاویر، جدول های عریض و بخش های دارای محتوای افقی مفید است.

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

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

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

وجود آرگومان، کاربرد متد را از خواندن مقدار به تنظیم آن تغییر می دهد. به بیان ساده، scrollLeft() مقدار را می خواند و scrollLeft(position) موقعیت را تعیین می کند. این تفاوت هنگام نوشتن کد مهم است، چون نتیجه مورد انتظار شما به ارسال یا ارسال نکردن مقدار بستگی دارد.

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

در خط نخست، رویداد کلیک برای همه عناصر button انتخاب شده تعریف می شود. سپس تابع داخل رویداد اجرا می شود و با انتخاب عنصر div، مقدار scrollLeft() را می خواند. در پایان، تابع alert() آن مقدار را در یک پنجره ساده نشان می دهد.

در یک صفحه ممکن است چندین div وجود داشته باشد. در آن صورت عبارت $("div") همه آن ها را انتخاب می کند و لازم است توجه کنید که jQuery در عملیات خواندن معمولاً مقدار عنصر نخست مجموعه را برمی گرداند. برای نتیجه دقیق تر، به جای انتخاب عمومی، از شناسه یا کلاس مشخص استفاده کنید؛ برای مثال $("#content") یا $(".scroll-area").

همین متد را می توانید برای جابه جایی برنامه ریزی شده نیز به کار ببرید. برای نمونه، با کلیک روی یک دکمه مقدار مشخصی به اسکرول عنصر داده می شود. این الگو برای کنترل نوار محتوای افقی یا انتقال کاربر به بخشی از یک فهرست عریض کاربرد دارد. در نمونه زیر فرض شده است عنصر دارای شناسه gallery است و یک دکمه با شناسه move-button در صفحه قرار دارد.

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

مزیت اصلی متد scrollLeft، کوتاه بودن ساختار و امکان استفاده هم زمان برای خواندن و تغییر موقعیت است. این روش با انتخابگرهای jQuery هماهنگ می شود و در رابط های تعاملی، نیاز به محاسبه مستقیم مختصات را کاهش می دهد. با این حال، متد به تنهایی ظاهر نوار اسکرول یا شیوه پیمایش را طراحی نمی کند؛ برای ساخت تجربه مناسب باید ساختار HTML، استایل CSS، رفتار صفحه و نیاز کاربران را نیز در نظر بگیرید.

عنصر درست را انتخاب کنید. شناسه یا کلاس یکتا، انتخاب عنصر هدف را روشن می کند و از تاثیر ناخواسته روی چند بخش صفحه جلوگیری می کند. پیش از اجرای متد نیز مطمئن شوید selector با ساختار HTML صفحه هماهنگ است.

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

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

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

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

اگر تنظیم موقعیت اثری ندارد، ابتدا بررسی کنید selector به عنصر مورد نظر اشاره می کند یا نه. سپس مطمئن شوید محتوا واقعاً از محدوده نمایش عنصر بیرون می رود و مقدار تعیین شده در محدوده پیمایش قرار می گیرد. ابزار توسعه مرورگر می تواند در بررسی ساختار DOM و مقدارهای CSS کمک کند.

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

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

متد scrollLeft در jQuery راهی کاربردی برای کنترل موقعیت افقی عناصر HTML است. با فراخوانی بدون آرگومان، مقدار جاری را می خوانید و با ارسال یک عدد، موقعیت اسکرول را تغییر می دهید. انتخاب دقیق عنصر، وجود محتوای قابل پیمایش و اجرای کد در زمان مناسب، سه نکته کلیدی برای استفاده درست از این متد هستند. با تمرین مثال ها می توانید آن را در گالری ها، جدول های عریض و نوارهای محتوایی به کار بگیرید.