پیمایش روان در Chrome 49

اگر مردم واقعاً چیزی از پیمایش می‌خواهند، صاف بودن آن است. از لحاظ تاریخی، کروم در برخی مکان‌ها پیمایش نرمی داشته است، مثلاً زمانی که کاربران با ترک‌پد خود پیمایش می‌کنند یا صفحه‌ای را در تلفن همراه پرت می‌کنند. اما اگر کاربر یک ماوس به برق وصل کرده باشد، رفتار پیمایشی «پله‌ای» هیجان‌انگیزتری خواهد داشت، که از نظر زیبایی‌شناختی چندان خوشایند نیست. همه چیز در Chrome 49 در حال تغییر است.

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

  • احساس دره عجیب و غریب. این خود را به دو صورت نشان می‌دهد: اولاً، یک سایت ممکن است رفتار اسکرول نرمی داشته باشد، اما دیگری ممکن است نداشته باشد، بنابراین کاربر می‌تواند در نهایت به دلیل ناسازگاری احساس سردرگمی کند. ثانیاً، فیزیک نرمی کتابخانه لزوماً با فیزیک پلت فرم مطابقت نخواهد داشت. بنابراین در حالی که حرکت ممکن است صاف باشد، ممکن است اشتباه یا عجیب به نظر برسد.
  • افزایش تمایل به اختلاف موضوع اصلی و jank. مانند هر جاوا اسکریپت اضافه شده به صفحه، بار CPU افزایش می یابد. این لزوماً فاجعه نیست، بسته به کارهای دیگری که صفحه انجام می دهد، اما اگر کار طولانی مدتی روی رشته اصلی وجود داشته باشد، و پیمایش به رشته اصلی همراه شده باشد، نتیجه خالص می تواند طومارهای لکنت زبان و jank باشد.
  • نگهداری بیشتر برای توسعه دهندگان، کد بیشتری برای دانلود کاربران. داشتن یک کتابخانه برای انجام پیمایش روان چیزی است که باید به روز نگه داشته شود و نگهداری شود، و به وزن کلی صفحه سایت می افزاید.

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

در Chrome 49، رفتار پیش‌فرض اسکرول تغییر Windows، Linux، و ChromeOS خواهد بود. رفتار اسکرول قدیمی و پلکانی در حال از بین رفتن است و پیمایش به طور پیش فرض روان خواهد بود! هیچ تغییری در کد شما لازم نیست، به جز حذف کتابخانه های اسکرول صاف اگر از آنها استفاده کرده اید.

چیزهای پیمایش بیشتر

موارد دیگری نیز در رابطه با طومار در دست ساخت هستند که قابل ذکر است. بسیاری از ما می‌خواهیم افکت‌های همراه با پیمایش، مانند اختلاف منظر، پیمایش صاف به یک قطعه سند (مانند example.com/ #somesection ) داشته باشیم. همانطور که قبلاً اشاره کردم، رویکردهایی که امروزه استفاده می شود اغلب می تواند برای توسعه دهندگان و کاربران مضر باشد. دو استاندارد پلتفرم وجود دارد که روی آنها کار می‌شود که می‌توانند کمک کنند: Compositor Worklets و scroll-behavior CSS.

هودینی

Compositor Worklets بخشی از Houdini هستند و هنوز به طور کامل مشخص و پیاده سازی نشده اند. همانطور که گفته شد، همانطور که وصله ها فرود می آیند ، به شما امکان می دهند جاوا اسکریپتی را بنویسید که به عنوان بخشی از خط لوله کامپوزیتور اجرا می شود، که به طور کلی به این معنی است که افکت های همراه با پیمایش مانند اختلاف منظر کاملاً با موقعیت اسکرول فعلی هماهنگ می شوند. با توجه به روشی که امروزه پیمایش انجام می‌شود، جایی که رویدادهای اسکرول فقط به صورت دوره‌ای به رشته اصلی ارسال می‌شوند (و می‌توانند توسط سایر رشته‌های اصلی مسدود شوند)، این نشان دهنده یک جهش بزرگ به جلو است. اگر به Compositor Worklets یا هر یک از ویژگی‌های جدید هیجان‌انگیز دیگری که هودینی ارائه می‌کند علاقه‌مند هستید، به پست معرفی هودینی توسط Surma ، مشخصات هودینی نگاهی بیندازید و افکار خود را در لیست پستی هودینی قرار دهید!

اسکرول رفتار

وقتی صحبت از اسکرول مبتنی بر قطعه می شود، ویژگی scroll-behavior CSS چیز دیگری است که می تواند کمک کند. اگر می‌خواهید آن را امتحان کنید، خوشحال می‌شوید که بدانید قبلاً در فایرفاکس ارسال شده است، و می‌توانید با استفاده از پرچم «فعال کردن ویژگی‌های پلتفرم وب آزمایشی» آن را در Chrome Canary فعال کنید. اگر -- مثلا -- عنصر <body> را روی scroll-behavior: smooth تنظیم کنید، همه اسکرول هایی که با تغییرات قطعه یا window.scrollTo فعال می شوند، به آرامی متحرک خواهند شد! این خیلی بهتر از استفاده و نگهداری کد از کتابخانه ای است که سعی می کند همان کار را انجام دهد. با چیزی اساسی مانند پیمایش، اجتناب از شکستن انتظارات کاربر بسیار مهم است، بنابراین در حالی که این ویژگی‌ها در جریان هستند، همچنان ارزش دارد که رویکرد ارتقای پیشرونده را اتخاذ کنید و هر کتابخانه‌ای را که تلاش می‌کند این رفتارها را چند برابر کند حذف کنید.

برو جلو و اسکرول کن

از Chrome 49، پیمایش روان‌تر می‌شود. اما این همه چیز نیست: پیشرفت‌های بالقوه بیشتری وجود دارد که ممکن است از طریق ویژگی‌های هودینی و CSS مانند smooth-scroll ایجاد شود. Chrome 49 را امتحان کنید، نظر خود را به ما بگویید، و مهمتر از همه، به مرورگر اجازه دهید تا جایی که می توانید پیمایش کند!