Един ден някои дизайнери ви предоставят красиви макети 🌠 и ... персонализирани ленти за превъртане, подобни на macOS, които изглеждат така:
Но може би отляво, по-малък или по-голям, с различни отстъпи в зависимост от това дали е мобилен 📱, настолен 🖥️ или телевизионен екран 📺 Искате ли повече?
Но реалността е... персонализирането на лентите за превъртане остава същото от края на 90-те. Ако баща ми програмираше, щеше да ми се подиграва цял ден, докато намеря решението да направя всичко универсално и стабилно. „2020 г. е и все още е PITA“.
Родна поддръжка
✅ Webkit и Blink
::-webkit-scrollbar {}
::-webkit-scrollbar-button {}
::-webkit-scrollbar-track {}
::-webkit-scrollbar-track-piece {}
::-webkit-scrollbar-thumb {}
::-webkit-scrollbar-corner {}
::-webkit-resizer {}
Това означава, че поне работи с Chrome, Safari, Opera, Edgium (Edge, базиран на WebKit за iOS и Blink за Android, Windows и MacOS) и по-малко известни като Vivaldi и други.
Пример: https://jsfiddle.net/4yd7bg2r/1/
✅ Гекон
Тъй като Firefox 64 беше пуснат, персонализирането на лентата за превъртане вече е налично.
Напомням ви, че „оригиналната грешка“ беше докладвана преди 18 години, само „преди по-малко от 1 година внедряване на CSS Scrollbars Module Level 1“ беше взето предвид 😔.
И все пак не работи за мен, когато опитате тази част от CSS:
.container {
scrollbar-color: rebeccapurple green;
scrollbar-width: 5px;
}
Проверете го във вашия FF, моят не работи с това.
Пример: https://jsfiddle.net/beraliv/4yd7bg2r/14/
Въпреки това, ако опитате това, то работи перфектно:
.container {
scrollbar-width: thin;
}
Повече информация можете да намерите в MDN: scrollbar-width и scrollbar-color.
❌ Свързани с тризъбеца
Ако не сте запознати с него, вероятно забравете за него. Това е IE11. Такава болка навсякъде. Може би изобщо не го поддържа?
Въпреки това, дори той има CSS свойства, които могат да помогнат:
А също и свойство автоматично скриване на лентата за превъртане!!! Благодаря 🙏⚡
Друг е EdgeHTML, който е разклонение на Trident и се използва в стария Edge. Имаше само „подобрение“ в своя изоставащ файл със среден приоритет, за да добави поддръжка за стилизиране на лентата за превъртане. Но след изданието на Edgium можете да използвате псевдоелементи на Webkit / Blink 🎉.
CSS хакове и трикове
Бавно, но сигурно постигаме това, което искаме.
Лента за превъртане вляво
transform: https://jsfiddle.net/4yd7bg2r/5/ със страхотна поддръжка
direction: https://jsfiddle.net/4yd7bg2r/6/ с не лоша поддръжка
Скриване на лентата за превъртане
overflow, margin и padding: хоризонтално https://jsfiddle.net/4yd7bg2r/8/ и вертикално https://jsfiddle.net/4yd7bg2r/7/
Включете лентата за превъртане с JS
Приемайки факта, че FF, Edge и IE не поддържат персонализиране на лентата за превъртане, JS библиотеката може да не е лошо решение за тях.
Независимо от библиотеката
За съжаление някои от библиотеките са плъгини за jQuery: jScrollPane, nanoScroller. И това не може да бъде подходящо.
Размер на пакета
Размерът на лентата за превъртане JS пакет трябва да си заслужава. Това обаче не е това, което се очаква.
lib / минимизиран в KB / минимизиран + gzipped в KB
🕳️ размер на черна дупка
nanoscroller / 94,2 / 32,4 (с jQ)
simplebar / 63,5 / 19 (с lodash, resize наблюдател polyfill и core-js)
iscroll / 32.1 / 8.3
perfect-scrollbar / 17.7 / 5.1
jscrollpane / 15.7 / 5.2
🤘 достатъчно лек< br /> nanoscroller / 8,31 / 2,89 (без jQ)
slim-scroll / 4,2 / 1,8
🔥 твърде хубаво, за да е истина
просто -лента за превъртане / 2.3 / 0.97
Bundlephobia помага да се оценят размерите на пакетите.
Разбира се, добри варианти са леки ванилови библиотеки.
Мобилна поддръжка
Някои от опциите като обикновена лента за превъртане предоставят ленти за превъртане, които не са удобни за мобилни устройства. Изисква се да се добави много функционалност и следователно не е готов за производство.
Платформено ориентиран
slim-scroll е създаден от потребител с препълване на стека и има за цел да подобри дизайна на Windows. Това е добре, тъй като лентата за превъртане на macOS изглежда добре навсякъде. Родното персонализиране обаче е достъпно само за WebKit и Blink.
Последният ми избор: да опитам perfect-scrollbar или simplebar.
Желая ви продуктивна седмица 💪
Вашето внедряване
Вероятно искате да персонализирате своя собствена лента за превъртане. Първо разгледайте „механиката на лентата за превъртане“.
Връзки
⭐⭐️ Google Developers: CSS Deep Dive: matrix3d() за персонализирана лента за превъртане с перфектна рамка
⭐⭐️️ CSDGN: Механика на лентата за превъртане
⭐️ CSS трикове: Персонализирани ленти за превъртане в WebKit
📄 MDN: CSS ленти за превъртане
📄 W3School: Как да създадете персонализирани ленти за превъртане
📄 Препълване на стека: Скриване на лентата за превъртане, но все още можете да превъртате
📄 Stack Overflow: Персонализирана CSS лента за превъртане за Firefox
📄 Stack Overflow: CSS персонализирана лента за превъртане в div
Алексей Березин,
аспирант от Санкт Петербургския държавен университет, магистър
Front-end разработчик от Yandex
