Хабр Курсы для всех
РЕКЛАМА
Большая витрина: от крупнейших школ до частных авторов. Сравнивайте по цене, длительности, формату и выбирайте самый подходящий курс!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 54
Пример подвешивает браузер (ff, 20). В хроме бесконечная загрузка чего-то. А статья хорошая, всё понятно расписано!)
Колесико не срабатывает если навести указатель на скролл-бар. Ничего не происходит если зажать стрелочку вверх или вниз, одиночные клики срабатывают. Также ничего не происходит если нажать на поле, где скользит скролл-бар (элемент с классом scrollar-scroll)
У, непосредственно, скроллбара реализована минимальная реакция на действия пользователя. В статье я старался уделить больше внимания самой прокрутке контента: сохранить то, что предлагает браузер и ос. Я учту Ваши замечания касаемо скроллбаров. Спасибо.
специфическая штука, но её можно компенсировать сдвинув указатель мыши в сторону контента
Колесико не срабатывает если навести указатель на скролл-бар.
специфическая штука, но её можно компенсировать сдвинув указатель мыши в сторону контента
Не кастомизируйте скроллбары. Просто не делайте этого. Вы всё равно не обеспечите такую же работу, как у нативных.
Вы это скажите заказчикам
Кастомизация нативного скрола — это лучший компромисс чем его полная подмена, насчет поведения, если не считать стрелочки(ими еще кто-то пользуется, где они есть?), то клик — пролистывание на одну страницу(скрипт из топика не обрабатывает), а DnD даже не знаю как можно сознательно испортить.
Не кастомизируйте скроллбары.
А зачем тогда нужен frontend-программист/верстальщик в штате, если он не может воплощать в жизнь идеи дизайнера?
Разработчики браузеров и стандартов, увы, не предоставляют нормальных средств для кастомизации скроллбаров (есть только платформозависимые), поэтому подобные задачи приходится решать по месту.
Вы всё равно не обеспечите такую же работу, как у нативных.
звучит как вызов)
область прокрутки сохраняет весь нативный функционал браузера, остались только скроллбары…
«звучит как вызов) область прокрутки сохраняет весь нативный функционал браузера, остались только скроллбары…»
А производительность? У вас пустая страница со скролбаром кушает 30% моего процессора.
Win7+Firefox
А производительность? У вас пустая страница со скролбаром кушает 30% моего процессора.
Win7+Firefox
я уже в курсе. Начало здесь
звучит как вызов)
область прокрутки сохраняет весь нативный функционал браузера, остались только скроллбары…
Звучит как «вызов принят» :)
В мобильных Хроме и Opera Beta очень тормозно двигается (прокручивается) страница. В Opera Mini не крутится вовсе.
По-моему, кастомизировать скролл — все равно, что кастомизировать меню Файл или кнопку закрытия браузера.
Пара замечаний по OSX-style скроллбарам.
1. Не резиновый скролл.
2. При наведении на скроллбар его ширина не увеличивается.
1. Не резиновый скролл.
2. При наведении на скроллбар его ширина не увеличивается.
1. Не резиновый скролл.
можете пояснить?
2. При наведении на скроллбар его ширина не увеличивается.
а разве реализовано не так? (стиль Safari)
— на этой странице слева вверху есть возможность переключения стилей
1. 
2. обычный:
под мышкой:
2. обычный:
под мышкой:
ок, это частный случай. Какая версия OS?
Я тоже под Mac OS работаю, у меня Mac OS 10.8, стилизовал под неё.
Я тоже под Mac OS работаю, у меня Mac OS 10.8, стилизовал под неё.
Поддерживаю silvansky. Поведение, описанное им, является дефолтным в 10.8 макоси.
10.8.3, скриншоты делал из последней Safari.
Вообще кастомизация системных элементов управления это крайне вредная практика.
Приложением (пусть даже и веб-), которое изменяет стандартные системные контролы как минимум неудобно пользоваться как минимум потому что логика его работы отличается от общей парадигмы работы в конкретной среде.
Так что идеи по поводу кастмизации системных элементов оформления желательно отметать еще на этапе проектирования и ставить дизайнеру в этом плане жесткие ограничения.
Приложением (пусть даже и веб-), которое изменяет стандартные системные контролы как минимум неудобно пользоваться как минимум потому что логика его работы отличается от общей парадигмы работы в конкретной среде.
Так что идеи по поводу кастмизации системных элементов оформления желательно отметать еще на этапе проектирования и ставить дизайнеру в этом плане жесткие ограничения.
Очень непонятно, почему до сих пор в браузерах не предусмотрены как стандарт стили для скроллбаров.
я специально полез и нашел кусок кода из своего проекта примерно 2001 года.
1 BODY{SCROLLBAR-HIGHLIGHT-COLOR:#003333;
2 SCROLLBAR-SHADOW-COLOR:#ffcc33;
3 SCROLLBAR-3DLIGHT-COLOR:#ffcc33;
4 SCROLLBAR-ARROW-COLOR:#ffcc33;
5 SCROLLBAR-DARKSHADOW-COLOR:#006666;
6 SCROLLBAR-BASE-COLOR:#006666;
7 BACKGROUND-COLOR:#006666;
8 COLOR:#000000}
это все уже было. от этого ушли давным давно и слава богу. ))
1 BODY{SCROLLBAR-HIGHLIGHT-COLOR:#003333;
2 SCROLLBAR-SHADOW-COLOR:#ffcc33;
3 SCROLLBAR-3DLIGHT-COLOR:#ffcc33;
4 SCROLLBAR-ARROW-COLOR:#ffcc33;
5 SCROLLBAR-DARKSHADOW-COLOR:#006666;
6 SCROLLBAR-BASE-COLOR:#006666;
7 BACKGROUND-COLOR:#006666;
8 COLOR:#000000}
это все уже было. от этого ушли давным давно и слава богу. ))
Чуваки, вы чего? Уже вторая статья с велосипедом за последнюю неделю. На хабре уже писали про baron, который на сегодняшний день всё это умеет и реализован проще некуда.
У baron-а есть небольшой недостаток — для работы горизонтального скролла необходимо указывать высоту, будь она в пикселях или в процентах, но быть должна. И, к сожалению, статью до сих пор не обновили, что барон поддерживает и горизонтальный скролл. Также нет контролов — а тут есть их реализация, пусть и минимальная.
Насчёт велосипедов — почему бы и нет, если делается какое-то новое решение? Ведь, как говорится, в споре рождается истина. Видимо в последнее время заказчики стали больше просить делать кастомные скроллбары, и существующие решения не подходили, оттуда и велосипеды.
Насчёт велосипедов — почему бы и нет, если делается какое-то новое решение? Ведь, как говорится, в споре рождается истина. Видимо в последнее время заказчики стали больше просить делать кастомные скроллбары, и существующие решения не подходили, оттуда и велосипеды.
Контролы в baron'е есть.
Искал, но не смог найти. Не подскажете, где можно увидеть?
Простите, обманул. Кнопочек вниз/вверх действительно нет.
С другой стороны, не могу вспомнить чтобы в последнее время их где-то встречал, они ведь неудобные и ими никто не пользуется — для чего их добавлять в интерфейс?
С другой стороны, не могу вспомнить чтобы в последнее время их где-то встречал, они ведь неудобные и ими никто не пользуется — для чего их добавлять в интерфейс?
Собственно, кастомные скроллбары — это пожелание заказчика или требование дизайна. И если в дизайне есть кнопочки, то функционал придётся допиливать вручную, разбираясь в чужом коде — не слишком приятная перспектива, не правда ли?
Помимо этого есть и другие события: скролл мыши над скроллбаром и клики на подложке скроллбара для более быстрой перемотки.
Помимо этого есть и другие события: скролл мыши над скроллбаром и клики на подложке скроллбара для более быстрой перемотки.
Хм, надо подумать. Не приходил в голову кейс когда высота определяется содержимым.
Теоретически, то же самое можно сказать про ширину.
Теоретически, то же самое можно сказать про ширину.
Зачем нужны кастомные скроллбары?
Самое распространенное применение это маленькие окна, такие как Чат в Google+, а так же они его используют в почте. Или например всплывающие сообщения в VK. Вообще любые окна малого размера, где дефолтный скролл смотрится ужасно громоздко.
Например для онлайн-игр, вот тыкните тут на вкладку «Существа» (там кастомный скролл), а затем на вкладку «Летопись» (там кастомный селект). Как по мне там стандартные браузерные контролы смотрелись бы ужасно.
Опять же если дизайнер задумал на сайте тёмную тему, то белые скроллбары и поля формы будут там смотреться чужеродными.
Опять же если дизайнер задумал на сайте тёмную тему, то белые скроллбары и поля формы будут там смотреться чужеродными.
Скажем, для различных веб-интерфейсов, где дизайн предполагает футуристичность. Странно будет на фоне таких кнопок и панелей выглядеть стандартный скорл, вам не кажется? Никто не говорит о том, что нужно в каждом приложении заменять скрол, но есть частные задачи где это делать необходимо
У меня через некоторое время скролл начинает подвешивать браузер Хром (Windows 7 x64, Google Chrome 26).
Функция апдейта, которая заниматся проверкой изменения размера, должна совершать минимальное количество действий, иначе даже при небольшом количестве скроллов на странице, загрузка процессора будет очень большой.
Также, если я изменяю содержимое контейнера (а конекретно — удаляю картинки), скроллы не исчезают, когда размер контейнера становится меньше видимой области.
И, конечно же, 5 вложенных див-ов — это, имхо, нехорошо.
А так, описание задумки хорошое, постарался.
Функция апдейта, которая заниматся проверкой изменения размера, должна совершать минимальное количество действий, иначе даже при небольшом количестве скроллов на странице, загрузка процессора будет очень большой.
Также, если я изменяю содержимое контейнера (а конекретно — удаляю картинки), скроллы не исчезают, когда размер контейнера становится меньше видимой области.
И, конечно же, 5 вложенных див-ов — это, имхо, нехорошо.
А так, описание задумки хорошое, постарался.
webkit поддерживает кастомизацию скроллбаров: css-tricks.com/custom-scrollbars-in-webkit/
сразу вспомнилось habrahabr.ru/company/2gis/blog/169359/#comment_5908293
Ребята, есть проверенное решение github.com/Diokuz/baron которым пользуется несколько миллионов человек в месяц.
Если там чего-то не хватает, что-то не работает — пишите ишью, или пишите мне любыми доступными средставми коммуникации — я с радостью поправлю.
Контролы сделаю в ближайшее время.
Если там чего-то не хватает, что-то не работает — пишите ишью, или пишите мне любыми доступными средставми коммуникации — я с радостью поправлю.
Контролы сделаю в ближайшее время.
OH SHI~
Полтора года назад я имел неосторожность не только кастомизировать скроллбары (да-да, под тем же соусом «заказчик пожелал»), но и написать об этом статью.
С того момента моё убеждение о недопустимости вмешательства в интерфейс надсистемы — браузера — только укрепилось.
Полтора года назад я имел неосторожность не только кастомизировать скроллбары (да-да, под тем же соусом «заказчик пожелал»), но и написать об этом статью.
С того момента моё убеждение о недопустимости вмешательства в интерфейс надсистемы — браузера — только укрепилось.
Дело не в убеждении, а в потребности: игры, новые тренды в дизайне, отсутствие нативной возможности кастомизации в браузере и т.д.
Так что нужно знать и уметь кастомизировать (~решать нестандартные задачи), а не сидеть, забившись в угол от страха, укрепляя свои убеждения… (признаться, уже достали комментаторы, которые ссут что-либо реализовывать, ссылаясь на псевдо-мудрость и чушь)
Помимо Вашей статьи, на хабре есть еще минимум 3 (вместе с моей), в которых обсуждается решение задачи по кастомизации скролбаров. Также можно посмотреть исходники vkontakte и facebook, они также УЖЕ решили эту задачу.
Вы не побоялись кастомизировать браузерные скроллбары, и даже написали об этом статью. Так что лучше еще раз посмотрите на свое решение и выявите те места, в которых допустили ошибку или где не получилось достичь нужного результата. Еще раз их проработайте. Это вполне решаемая задача.
Пока есть потребность — будет спрос. Есть спрос — будут деньги. Есть деньги — есть новая машина, комп, квартира, отдых и т.д.
С профессионалами сейчас реально голяк… Так что не останавливайтесь на достигнутом.
Так что нужно знать и уметь кастомизировать (~решать нестандартные задачи), а не сидеть, забившись в угол от страха, укрепляя свои убеждения… (признаться, уже достали комментаторы, которые ссут что-либо реализовывать, ссылаясь на псевдо-мудрость и чушь)
Помимо Вашей статьи, на хабре есть еще минимум 3 (вместе с моей), в которых обсуждается решение задачи по кастомизации скролбаров. Также можно посмотреть исходники vkontakte и facebook, они также УЖЕ решили эту задачу.
Вы не побоялись кастомизировать браузерные скроллбары, и даже написали об этом статью. Так что лучше еще раз посмотрите на свое решение и выявите те места, в которых допустили ошибку или где не получилось достичь нужного результата. Еще раз их проработайте. Это вполне решаемая задача.
Пока есть потребность — будет спрос. Есть спрос — будут деньги. Есть деньги — есть новая машина, комп, квартира, отдых и т.д.
С профессионалами сейчас реально голяк… Так что не останавливайтесь на достигнутом.
О, я тоже писал библиотеку для кастомизации скролла (сторонняя tinyscrollbar.js не устраивала хотя бы тем, что jQuery требовала для работы).
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Кастомизация скроллбаров в браузере: компромисс между технологиями html, css, js и удобством использования