До чого все це?
Тема дизайнерських вишукувань і побажань іноді знаходиться за межею добра і зла. Але від цього нікуди не дітися, буває, що вони хочуть неможливого. Але я вважаю, що можна зробити все (якщо це не суперечить законам фізики), все питання в складності реалізації, а відповідно в терміни вирішення і як підсумок - вартість.
У WEB'е є ряд речей, які не піддаються стилізації в класичному розумінні, тобто не можна, використовуючи тільки CSS, змінити їх зовнішній вигляд. До таких елементів відносяться багато теги форми: Селект, чекбокси, радіо-кнопки. Раніше я вже розповідав, як стилізувати select. Тепер поговоримо, як зробити гарний скролл-бар. Відверто кажучи, я ненавиджу такі завдання, які вирішуються не очевидно або нестандартно, тому що від браузера до браузеру, або навіть від версії до версії браузера або ОС, можуть вести себе по різному. Досить лірики, працюємо.
трохи теорії
Повна емуляція на js мені не подобається, тому що це складно і якщо js падає, то можливість гортання блоку пропадає зовсім. Десь давно я почерпнув таку ідею:
Технічно я уявляю як це все робити, і колись навіть писав повністю всю обробку сам, але в даному випадку мені не хотілося винаходити велосипед. Пошукавши варіанти емуляції скролла, знайшов бібліотеку baron. Вона мене влаштовувала більш ніж, за винятком того, що всі обгортки і блоки емуляції потрібно вставляти в html. Такий варіант мені здавався дещо дивним, раз є плагін, то мені хотілося б робити мінімум дій, в ідеалі просто нацькувати плагін на блок, який треба стилізувати і все, нехай він сам додає потрібну розмітку. Виходячи з цього душевного посилу було прийнято рішення написати невелику обгортку, яка підготує блоки і запустить емуляцію скролла.
Власне, код обгортки такий:
І викликаємо ось так
Я навіть трохи спробував відповідати ідеології БЕМ. Дивлячись на код відразу кидається в очі, що функція check_size викликається 2 рази поспіль, навіщо так робиться і взагалі навіщо вона? А потім, що кастомний скролл-бар додається тільки тоді, коли це реально необхідно, це відповідь на друге питання, а на перше питання відповідь така: Після того як було прийнято рішення, що треба додати скролл-бар, запускається процес додавання розмітки і в цей момент розміри зовнішніх блоків можуть (з великою ймовірністю вони це зроблять) зміниться, і щоб все виглядало адекватно, запускаємо процес ініціалізації двічі.
Щоб було простіше втягнуться в процес розуміння, наведу тут приклад стилів одного з наших проектів
Реалізація, звичайно, Костильна, і для мобільних пристроїв її варто відключати, але начебто скрізь працює, так що можете користуватися на здоров'я. До речі, є невеликий приклад ось тут. Користуйтеся на здоров'я =)
З початком нового робочого року;)