CSS Scroll Snap به وب‌سایت‌ها این امکان را می‌دهد که وقتی کاربر عملیات پیمایش را انجام می‌دهد، صفحه وب یا هر محفظه اسکرول دیگری را به یک موقعیت اسکرول خاص بچسبانند. این ویژگی بوده است در تمام مرورگرهای مدرن پشتیبانی می شود برای بیش از دو سال، اما بسیاری از وب سایت هایی که می توانند از آن بهره مند شوند، هنوز از آن استفاده نمی کنند.
اسکرول کردن احتمالاً بیشتر با چرخ فلک های افقی مرتبط است (نگاه کنید به رویکرد فقط CSS کریس) و صفحات وب خاصی که به اسلایدهای تمام صفحه تقسیم می شوند. اما چرا در آنجا توقف کنید؟ من معتقدم که snapping می تواند تجربه پیمایش را در هر صفحه وب که موارد را در یک شبکه یا فید قرار می دهد، بهبود بخشد.
به عنوان مثال، اکثر وب سایت های خرید محصولات را در یک شبکه نمایش می دهند. در حالت ایده آل، کاربر دوست دارد با کمترین تلاش بین ردیف های شبکه بپرد. کاربر می تواند فشار دهد فضا برای پیمایش صفحه تقریباً یک صفحه (ارتفاع درگاه دید)، اما بسته به ارتفاع ردیف های شبکه، موقعیت اسکرول در نهایت با شبکه "از همگام سازی" خارج می شود و کاربر باید دوباره آن را به صورت دستی تنظیم کند.
اگر اسکرول اسنپ را به این صفحه اضافه کنیم، کاربر می تواند به طور مداوم به سطر بعدی پیمایش کند. فضا کلید (فشردن تغییر + فضا به ردیف قبلی پیمایش می کند). خیلی بی دردسر است.
من فکر می کنم که اسکرول snapping می تواند به این وب سایت اضافه شود. و اجرای آن آنقدرها هم پیچیده نیست. کد CSS که برای این مثال استفاده کردم نسبتا ساده است:
html {
scroll-snap-type: y proximity;
}
.product-item {
scroll-snap-align: start;
scroll-margin-top: 75px; /* height of web page’s sticky header */
}اگر وب‌سایتی که مرتباً از آن بازدید می‌کنید، هنوز Scroll Snapping را اضافه نکرده باشد و فکر می‌کنید که تجربه پیمایش شما را بهبود می‌بخشد، لازم نیست منتظر بمانید. می‌توانید اسکرول را خودتان اضافه کنید — با سبک‌های کاربری.
اضافه کردن سبک های کاربری به وب سایت ها
در ویدیوی بالا می بینید که من یک فایل user.css را در تنظیمات پیشرفته سافاری انتخاب کردم. این فایل یک شیوه نامه کاربر است. این شامل سبک های CSS است که من نوشته ام و در محلی ذخیره شده است .css فایل، و به سافاری اضافه شد. سپس این «سبک‌های کاربر» به هر صفحه وب که در Safari باز می‌کنم اعمال می‌شود.
کروم و فایرفاکس به کاربران اجازه انتخاب شیوه نامه کاربر را نمی دهند. فایرفاکس از ویژگی مشابهی به نام پشتیبانی می کرد userContent.css در گذشته، اما این ویژگی منسوخ شده بود و به طور پیش فرض غیرفعال است در سال 2019. توصیه می کنم پسوند مرورگر Stylus برای این دو مرورگر (و سایر مرورگرهای مبتنی بر Chromium).
یکی از مزیت های مهم Stylus این است که به شما امکان می دهد سبک های کاربری را برای وب سایت ها و URL های خاص بنویسید. برگه سبک کاربر سافاری برای همه وب سایت ها اعمال می شود، اما می توان این کار را انجام داد، به عنوان مثال، با استفاده از روش جدید :has() شبه کلاس به انتخابگرهایی ایجاد کنید که فقط با وب سایت های خاصی مطابقت دارند.
ماژول CSS Cascading a را تعریف می کند مبدا کاربر برای سبک هایی که کاربر اضافه می کند. شیوه نامه کاربر سافاری متعلق به این مبدا است، اما پسوند Stylus استایل های کاربر را به مبدا نویسنده، جایی که شیوه نامه های وب سایت در آن قرار دارد، تزریق می کند. به طور خاص، Stylus استایل های کاربر را مستقیماً از طریق a وارد صفحه می کند <style> عنصر در انتهای <html> که آن را تبدیل می کند شیوه نامه نهایی در صفحه. از نظر فنی، این بدان معناست که سبک‌هایی که از طریق Stylus اضافه می‌شوند، به‌عنوان سبک‌های نویسنده طبقه‌بندی می‌شوند، زیرا در مبدا کاربر نیستند، اما من همچنان آنها را سبک کاربر می‌نامم زیرا کاربر آنها را اضافه می‌کند.
با این حال، ارزش آن را دارد که این تمایز را در نظر داشته باشید زیرا بر آبشار تأثیر می گذارد. وقتی ویژگی انتخابگر برابر باشد، سبک کاربر واقعی ضعیف تر از سبک خود صفحه است. این باعث می شود سبک های کاربر عالی باشد مناسب برای پیش فرض های کاربر. تحت همین شرایط، یک سبک اضافه شده از طریق Stylus است قوی از سبک صفحه، بنابراین قلم نمی تواند به راحتی برای تعریف پیش فرض های کاربر استفاده شود.
اگر اضافه کنیم !important در ترکیب، هم سبک های کاربر واقعی و هم سبک های اضافه شده از طریق قلم قوی تر از سبک های صفحه هستند. بنابراین وقتی می‌خواهید سبک‌های کاربری خود را به یک وب‌سایت تحمیل کنید، فرقی نمی‌کند که از گزینه «Style sheet» سافاری یا پسوند Stylus استفاده کنید. شما !important سبک ها در هر صورت برنده خواهند شد.
در بخش بعدی از مجموعه ای استفاده خواهم کرد !important سبک های کاربر برای اجرای اسکرول اسنپ در صفحه تایم لاین وب سایت توییتر. هدف من سرعت بخشیدن به روند خواندن جدول زمانی توییتر من با اجتناب از موقعیت‌های اسکرول نامناسب است که بالاترین توییت فقط تا حدی روی صفحه است.
برای جدول زمانی توییتر اسکرول کنید
پس از کمی آزمایش، روی کد CSS زیر حل و فصل کردم. این سبک ها در فایرفاکس به خوبی کار می کنند، اما من با مشکلاتی در کروم و سافاری مواجه شده ام. من این مسائل را در ادامه مقاله با جزئیات بیشتری شرح خواهم داد، اما در حال حاضر، بیایید روی رفتار در فایرفاکس تمرکز کنیم.
html {
scroll-snap-type: y mandatory !important;
}
/* tweets in the timeline are <article> elements */
article {
scroll-snap-align: start !important;
}
/* un-stick the sticky header and make it “snappable” as well */
[aria-label="Home timeline"] > :first-child {
position: static !important;
scroll-snap-align: start !important;
}
/* hide the “new Tweets available” floating toast notification */
[aria-label="New Tweets are available."] {
display: none !important;
}لازم است اضافه شود !important برای هر اعلان زیرا همه سبک های کاربر باید بر سبک های خود صفحه وب پیروز شوند تا پیاده سازی اسکرول سفارشی ما به درستی کار کند. ای کاش به جای نوشتن مکرر !important، من فقط می توانم استایل های کاربری خود را در یک "لایه مهم" قرار دهم، اما چنین ویژگی CSS وجود ندارد (هنوز).
ویدیوی زیر را تماشا کنید تا سبک‌های کاربر اسنپ اسکرول من را در عمل ببینید. توجه داشته باشید که چگونه هر فشار روی فضا کلید مجموعه بعدی توییت‌ها را به سمت نمایش اسکرول می‌کند، و اولین توییت از هر مجموعه با لبه بالایی درگاه نمایش تراز می‌شود. این به من امکان می دهد تا جدول زمانی خود را سریعتر بخوانم. وقتی لازم است به مجموعه توییت های قبلی برگردم، می توانم فشار دهم تغییر + فضا.
چیزی که من در مورد این نوع اسکرول کردن دوست دارم این است که به من امکان می دهد هر زمان که فشار می دهم پیش بینی کنم که صفحه چقدر پیمایش می کند. فضا. هر فاصله اسکرول برابر است با ارتفاع ترکیبی توییت‌های قابل مشاهده که کاملاً روی صفحه هستند. به عبارت دیگر، توییت نیمه قابل مشاهده در پایین صفحه به بالای صفحه منتقل می شود، که دقیقا همان چیزی است که من می خواهم.
Space توییت دیو را به بالای صفحه نمایش می دهد.برای امتحان کردن سبک‌های کاربر اسکرول اسنپ من در جدول زمانی توییتر خود، این مراحل را دنبال کنید:
- نصب پسوند قلم با افزونه های فایرفاکس یا فروشگاه وب کروم.
- به خط زمانی توییتر خود بروید در https://twitter.com/home.
- روی نماد Stylus در نوار ابزار مرورگر کلیک کنید و روی "this URL" در پنجره پاپ آپ کلیک کنید.
- Stylus یک ویرایشگر کد را در یک برگه مرورگر جدید باز می کند. استایل‌های کاربر اسنپ اسکرول من را در ویرایشگر کپی کرده و دکمه ذخیره را در نوار کناری سمت چپ فشار دهید. سبک‌ها فوراً در جدول زمانی توییتر شما اعمال می‌شوند (نیازی به بارگذاری مجدد صفحه نیست).
- شما می توانید سبک ها را در هر زمان به روز کنید. روی نماد Stylus و نماد Pencil کلیک کنید تا ویرایشگر دوباره باز شود.
ناتوانی در نادیده گرفتن ضربه زدن
اجرای من از اسکرول اسنپ برای جدول زمانی توییتر یک نقص بزرگ دارد. اگر یک توییت بلندتر از درگاه نمایش باشد، غیرممکن است که صفحه را اسکرول کنید تا قسمت پایین آن توییت نشان داده شود (به عنوان مثال، اگر می خواهید آن توییت را لایک یا بازتوییت کنید) زیرا مرورگر به زور صفحه را می بندد تا بالای توییت نشان داده شود. توییت (یا بالای توییت زیر).
شدت این مشکل به نمایشگر کاربر بستگی دارد. با مشاهده جدول زمانی توییتر بر روی یک مانیتور دسکتاپ بزرگ با ضریب بزرگنمایی صفحه کوچک، ممکن است با هیچ توییتی بلندتر از نمای نمایش مواجه نشوید.
من از گروه کاری CSS پرسیده ام که آیا امکان اضافه کردن مکانیزمی وجود دارد که به کاربر اجازه دهد اسکرول اجباری مرورگر را لغو کنید. احتمالاً باید اشاره کنم که این مشکل، حداقل در تئوری، می تواند با تغییر از آن حل شود mandatory به proximity چفت شدن من تست کردم proximity در کروم و فایرفاکس، و من آن را ناسازگار و گیج کننده دیدم. مرورگر اغلب در مواقعی که من انتظارش را نداشتم خراب می‌شود و بالعکس. شاید کد توییتر با آن تداخل داشته باشد proximity الگوریتم، مرورگرها هنوز کمی باگ هستند، یا شاید من فقط "اشتباه پیمایش می کنم"، اگر حتی ممکن است. من نمی دانم.
اما دلیل اصلی اینکه من با آن رفتم mandatory snapping این است که من می‌خواستم از موقعیت‌هایی که بالاترین توییت فقط تا حدی بعد از یک اسکرول روی صفحه نمایش داده می‌شود اجتناب کنم. نوع پیمایش سریع بین مجموعه‌هایی از توییت‌هایی که در ویدیوی بالا نشان داده‌ام تنها با mandatory چفت شدن
اگر شما هم مثل من ترجیح می دهید mandatory برای حل مشکل «توییت بلند» می‌توانم دو راه‌حل زیر را پیشنهاد کنم:
- می توانید توییت را در صفحه خود باز کنید و پس از آن به جدول زمانی بازگردید.
- اگر فقط می خواهید روی دکمه های Like یا Retweet کلیک کنید، می توانید تغییر-برای انتخاب توییت، روی آن کلیک کنید و سپس فشار دهید L دوست داشتنش یا T و پس از آن وارد برای ریتویت کردنش
مشکلات کروم و سافاری
سبک‌های کاربر اسکرول اسنپ من، رفتارهای متفاوتی را در کروم، سافاری و فایرفاکس ایجاد می‌کنند. این تفاوت‌ها تا حدی به دلیل اجرای دقیق مکانیسم گیر دادن هستند به مرورگر واگذار می شود:
ماژول CSS Scroll Snap عمداً هیچ انیمیشن یا فیزیک دقیقی را که برای اجرای موقعیت‌های اسنپ استفاده می‌شود، مشخص و الزامی نمی‌کند. این به عامل کاربر واگذار می شود.
نسخه فعلی سافاری دارای یک اشکال است که از عملکرد صحیح اسکرول در جدول زمانی توییتر جلوگیری می کند. من دارم این باگ را گزارش کرد.
در کروم با مشکلات زیر مواجه شدم:
- عملیات پیمایش به طور متناقض متحرک می شوند. گاهی اوقات انیمیشن آهسته است، گاهی اوقات آنی است، و گاهی اوقات آهسته شروع می شود اما سپس کوتاه می شود. من این را آزاردهنده دیدم.
- عملیات اسکرول به طور کلی بسیار آهسته متحرک می شود. من یک آزمایش در کروم و فایرفاکس انجام دادم (20 فضا فشار می دهد)، و 70٪ زمان بیشتری برای طی کردن مسافت مشابه در جدول زمانی توییتر خود در کروم نسبت به فایرفاکس (18.5 ثانیه در کروم در مقابل 11 ثانیه در فایرفاکس) صرف کردم.
- وقتی با استفاده از ترک پد لپ تاپم اسکرول می کنم، صفحه به شدت سوسو می زند. وقتی سعی می کنم با نگه داشتن دکمه سریع اسکرول کنم فضا کلید، صفحه بسیار آهسته اسکرول می شود و نوسان می کند. من گمان می کنم که هر دو مشکل توسط یک الگوریتم ایجاد می شوند. به نظر می رسد کروم در این موارد با سرعت بسیار بالایی دوباره عکس می گیرد. من دارم این باگ را گزارش کرد.
این اشکالات مرورگر و تفاوت بین مرورگرها می تواند برای وب سایت هایی که به دنبال اجرای اسکرول اسنپ هستند مشکل ساز باشد. به عنوان مثال، یک توسعه‌دهنده وب ممکن است خودداری کند زیرا از نحوه عملکرد اسکرول در یک مرورگر خاص خوشش نمی‌آید. مرورگرها می توانند این مشکل را با تعامل بیشتر کاهش دهند. در واقع اسکرول اسنپ یکی از حوزه های تمرکز مرورگر متقابل است تلاش Interop 2022.
راه دیگری که می‌توان وضعیت را بهبود بخشید، معرفی ویژگی‌های جدید CSS است که اسکرول اسنپ را قابل تنظیم‌تر می‌کند. این می‌تواند شامل طول مدت انیمیشن snapping، طول آستانه مجاورت برای snapping، و مکانیزمی برای نادیده گرفتن snapping اجباری باشد.
گیر دادن یا نگرفتن؟
من چند هفته است که از سبک های اسکرول اسنپ خود در جدول زمانی توییتر استفاده می کنم و نمی خواهم به عقب برگردم. توانایی ورق زدن سریع فید من فقط با فضا کلید فقط در سطح دیگری است.
با این حال، من این را یک ویژگی پیشرفته می دانم که احتمالا برای همه مناسب نیست. دلیلی وجود دارد که من آن را فقط در تایم لاین فعال کرده ام (/home مسیر) و هیچ جای دیگر در وب سایت توییتر. Snapping یک تغییر قابل توجه در نحوه پیمایش صفحه است و مدتی طول می کشد تا به آن عادت کنید. می تواند برای یک مورد خاص عالی کار کند، اما همچنین می تواند مانعی ایجاد کند و کاربر را ناامید کند.
بنابراین، وب‌سایت‌های دارای فید باید پس از بررسی دقیق و آزمایش‌های فراوان در مرورگرهای مختلف و با روش‌های مختلف ورودی (موس، صفحه‌کلید، پد لمسی، صفحه لمسی و غیره) تنها به عنوان یک ویژگی اختیاری، اسکرول کردن را ارائه دهند.
قبل از اینکه بری…
در نهایت، من به شدت توصیه می کنم نصب و امتحان کنید پسوند مرورگر Stylus. توسعه دهندگان وب (یا هر کسی که CSS می داند) این قدرت را دارد که به هر وب سایتی در مرورگر خود استایل دهی کند. می توانید بهبودها و اصلاحات جزئی را در وب سایت های مورد علاقه خود اعمال کنید. من بیشتر از آن برای پنهان کردن عناصر صفحه که به نظرم آزاردهنده هستند، مانند هدرهای چسبناک، پنجره های بازشو ویدیو و تعداد آرا استفاده می کنم.
اما مهمتر از آن، Stylus به شما اجازه می دهد تا به سرعت ویژگی های جدید CSS را در هر وب سایتی آزمایش کنید و در صورت لزوم، اشکالات مرورگر را گزارش کنید. با این کار می توانید به بهتر شدن پلتفرم وب کمک کنید.
