Comments 132
Можно ли использовать в своих проектах? Если да, то это отлично. Работает плавно и красиво. Обожаю минималистичный дизайн. К тому же на iPad тоже работает. К заголовкам нужно привыкнуть, но скролл не хуже чем в gmail.
+2
Да, конечно можно.
Заголовки можно не использовать.
Есть даже форк, где этот функционал вырезан.
Заголовки можно не использовать.
Есть даже форк, где этот функционал вырезан.
+4
darkwebdev.github.com/baron/test/ — ссылка на форк для ленивых. Для меня эта ссылка полезнее, чем демо из поста.
+3
а чем не устроил user-select: none (с кросс-браузерными модификациями) для отмены выделения?
css включен у всех, а javascript нет.
css включен у всех, а javascript нет.
0
user-select — не кроссбраузерное и не стандартное решение. Например, оно не работает в Opera и IE. Более того, там где оно работает, оно может быть в любой момент отменено — так что без гарантий.
В изначальном варианте блокировки выделения, врапперу выставлялся инлайновый стиль с префиксными свойствами user-select. Однако позже выяснилось, что оно, на фоне остальных механизмов, избыточно.
Если у пользователя нет JS, то у него не будет работать не только кастомный скроллбар (но останется системный!), но и 2ГИС-онлайн в целом.
В современном интернете отсутствие JS — нонсенс.
В изначальном варианте блокировки выделения, врапперу выставлялся инлайновый стиль с префиксными свойствами user-select. Однако позже выяснилось, что оно, на фоне остальных механизмов, избыточно.
Если у пользователя нет JS, то у него не будет работать не только кастомный скроллбар (но останется системный!), но и 2ГИС-онлайн в целом.
В современном интернете отсутствие JS — нонсенс.
+7
А зачем они включены в плагин по умолчанию? Лучше их сразу отдельным модулем оставить.
0
По сути это тоже костыль…
+2
В чистом виде, но что делать, если скроллбары все еще являются кошмаром любого разработчика/дизайнера?
0
Использовать костыли :) Пока ваше решение самое изящное из всех существующих…
+2
Это не мое. Хотя я реализовал поддержку нативного скролла таким же образом в более сложном варианте. Предложенное авторами решение работает в том числе и с touch-устройствами, без дополнительных ухищрений, о чем они забыли упомянуть.
+1
так ведь в начале статьи написано, что в стандартах нет возможности кастомизации скроллбара, значит любое решение будет костылем. но верстальщикам не привыкать, если не тормозит и кроссбраузерно — вин.
+7
Единственным существенным минусом этого решения является отсутствие возможности реализовать smooth scroll средствами css transitions.
А для «библиотечности» нужно упростить работу и дать возможность запускаться без настроек:
А для «библиотечности» нужно упростить работу и дать возможность запускаться без настроек:
acBar($('.scrollable))
, используя только подготовленную верстку и кусок кода. И уж, если функция acBar понимает, что объект завернут в jQuery-обертку, то лучше использовать ее как расширение $('.scrollable').acBar()
0
Особенность решения в том, что оно не является плагином какой-либо библиотеки, и вообще не имеет жёстких зависимостей.
jQuery легко может быть заменён на что угодно.
Так, например, в одном из форков, ценой IE8, baron сделан полностью независимым от сторонних библиотек. Нам, к сожалению, пока ещё нужно поддерживать этот браузер.
Что касается transition`ов, то это спорный вопрос. Все привыкли к тому, к чему привыкли — системному скроллбару.
А вот, допустим, в IE transition`ы скролла есть по-умолчанию, и это портит жизнь разработчикам.
jQuery легко может быть заменён на что угодно.
Так, например, в одном из форков, ценой IE8, baron сделан полностью независимым от сторонних библиотек. Нам, к сожалению, пока ещё нужно поддерживать этот браузер.
Что касается transition`ов, то это спорный вопрос. Все привыкли к тому, к чему привыкли — системному скроллбару.
А вот, допустим, в IE transition`ы скролла есть по-умолчанию, и это портит жизнь разработчикам.
+2
Если вы реализовали поддержку jQuery, то почему бы и не сделать это решение в стиле jQuery, для этого не придется изобретать костыли, зато упростит жизнь разработчикам. Отсутствие зависимостей — это плюс, но не стоит ради этого отказываться от удобства.
0
в принципе, можно написать малюсенький адаптер для jQuery и положить рядом на гитхаб
+1
Я не говорю про полный отказ от использования глобальной функции, а лишь про то что библиотека использующая jQuery, должна включать вариант в стиле jQuery. Это вопрос профессионализма — подчиняться принятым стандартам, ради всеобщего удобства.
Многие библиотеки из коробки одновременно поддерживают jQuery, nodejs и AMD. Зачем нужна поддержка jQuery, если в результате используется собственная конструкция? jQuery, тем и красив, что используется одинаково для разнообразных задач. И если бы разработчики jQuery рассуждали так же как автор, то мы бы продолжали заворачивать функцию в функцию, завернутую в функцию…
Многие библиотеки из коробки одновременно поддерживают jQuery, nodejs и AMD. Зачем нужна поддержка jQuery, если в результате используется собственная конструкция? jQuery, тем и красив, что используется одинаково для разнообразных задач. И если бы разработчики jQuery рассуждали так же как автор, то мы бы продолжали заворачивать функцию в функцию, завернутую в функцию…
0
мне кажется тут где-то недопонимание, у барона нет поддержки jQuery, для уменьшения размера он написан на чистом js, просто в примере показано как передавать в опции элементы при помощи jQuery, если он уже подключен к проекту.
т.е. можно написать baron($('.wrapper')...), а можно baron(getElementById('elementId')...)
т.е. можно написать baron($('.wrapper')...), а можно baron(getElementById('elementId')...)
0
0
А зачем вообще делать кастомный скролл?
+11
Затем что дефолтный скроллбар во вложенных элементах — это уродство?
+2
Не понял что вы хотите сказать. Переформулируйте что ли?
+1
Ну возьмите элемент поместите его по-середине страницы и поставьте
overflow:scroll
. Что ли. +3
вот это было бы уродством:
![image](https://dl.dropbox.com/u/1206404/2gis-online-scroll.png)
![image](https://dl.dropbox.com/u/1206404/2gis-online-scroll.png)
+7
вместо тысячи слов ))))
0
Ну а я бы не хотел, чтобы вы мой маковский скролл заменяли.
+15
А его никто и не хочет заменять. Все хотят скролл как мой маковский ))
+1
И что, ваш скролл умеет исчезать или нет, в зависимости от настроек на «Маке»?
+1
Я имел в виду, что у меня тоже Мак и мне хочется, чтобы все скроллы в мире были похожи на Маковский.
0
Это интересное желание, но у меня скролл, например, не пропадает, а у кого-то настроено, чтобы пропадал (поведение по-умолчанию). И мне хотелось бы, чтобы переключение этой настройки определяло как будут вести себя все скроллы в системе.
+3
Я ни за что в жизни не хочу, что бы мой scroll был как на Маке, простите уж.
+3
Хм, я почему-то не нахожу это уродством, нормальный скроллбар. Можно было бы утверждать что системный скроллбар уродство если у вас темный дизайн, но, в случае со светлым дизайном и светлым скроллбаром в виндах, я просто решительно не пойму яростное желание дизайнеров/владельцев сайта закастомизировать скроллбар. W3C на то и ответила «full stop», что скролбар это нечно больше чем элемент дизайна сайта — это системный контрол который люди привыкли видеть таким какой он есть. Ну и как маковод, лично я, например, ненавижу до глубины души когда сайты переиначивают нативный оверлейный/невидимый скроллбар и вставляют свой костыль со своим кастомным дизайном.
+22
В том-то и суть, что сколлбар смотрится нормально только на Маке. И то что w3c ответила «full stop», говорит о том, что они не провели должного анализа и, вместо создания стандарта, отделались отговоркой. Они и пятый html не смогли запустить, пока их whatwg под жопу не пнуло. Так что не о чем разговаривать.
-4
Вкусовщина полнейшая. Я, когда Виндой пользовался, терпеть не мог маковские скроллы, они неестественно смотрятся в винде.
+9
Дизайн скролла полностью задаётся в CSS. То, что демо-дизайн похож на маковский — ни о чём не говорит.
Вы можете сделать скроллбар в стиле Windows XP — и он таким будет на маках и линуксах ))
Вы можете сделать скроллбар в стиле Windows XP — и он таким будет на маках и линуксах ))
0
Я не понял зачем вы мне это говорите.
Я вам говорю, что в каждой системе чужой скролл смотрится неестественно. Желание «осчастливить» пользователей Винды маковским скроллбаром понятно не будет. Меня такие попытке на винде всегда раздражали.
Я вам говорю, что в каждой системе чужой скролл смотрится неестественно. Желание «осчастливить» пользователей Винды маковским скроллбаром понятно не будет. Меня такие попытке на винде всегда раздражали.
+5
W3C ответила по поводу скроллбара всей страницы в контексте того ужаса, который творился в IE заменой цветов, на красно-чёрный, например.
Сейчас ситуация меняется. Если FF реализует кастомизацию скроллбара, то такая кастомизация станет де-факто стандартом, к которому со временем подтянется ИЕ. Весь webkit это уже поддерживает.
Сейчас ситуация меняется. Если FF реализует кастомизацию скроллбара, то такая кастомизация станет де-факто стандартом, к которому со временем подтянется ИЕ. Весь webkit это уже поддерживает.
+2
это бесконечный спор, почему можно кастомизировать кнопки, но нельзя скроллбар? или вообще ничего нельзя менять в интерфейсе?
к примеру, на нашем проекте все наши дизайнеры сошлись в мнении, что стандартный скролл выглядит убого внутри попапа, поэтому мы договорились, что главный скролл на сайте должен быть стандартным (потому что он скроллит контент внутри стандартного окна и пользователю это привычно), а внутренние элементы интерфейса должны быть в стиле сайта.
к примеру, на нашем проекте все наши дизайнеры сошлись в мнении, что стандартный скролл выглядит убого внутри попапа, поэтому мы договорились, что главный скролл на сайте должен быть стандартным (потому что он скроллит контент внутри стандартного окна и пользователю это привычно), а внутренние элементы интерфейса должны быть в стиле сайта.
+2
Лучше бы плавность скролла колёсиком в левом меню исправили, а не меняли внешний вид.
У меня нет возможности колёсиком нормально прокручивать, дергается и прыгает список.
А на телефоне, его так вообще невозможно промотать :(
У меня нет возможности колёсиком нормально прокручивать, дергается и прыгает список.
А на телефоне, его так вообще невозможно промотать :(
0
извините, я погорячился… хотя у меня действительно скролл дергается и в Опере он не исчезает в левой панели, хотя его там не должно быть, т.к. контет может аш 2 раза там поместиться.
0
UFO just landed and posted this here
Это сложнее, т.к. «облачко» может иметь внутри все что угодно. Скриншот вверху лишь один из вариантов его контента.
+1
UFO just landed and posted this here
Так мы можем уйти далеко в философию.
Применение скролла очевидно. Если есть интерфейс, размещающийся строго на одном экране, внутри всегда будут области, в которых необходим скрол. Возьмите тот же айпад и откройте настройки.
Я согласен, что «облачко» надо дорабатывать. Но скрол здесь не при чем.
Применение скролла очевидно. Если есть интерфейс, размещающийся строго на одном экране, внутри всегда будут области, в которых необходим скрол. Возьмите тот же айпад и откройте настройки.
Я согласен, что «облачко» надо дорабатывать. Но скрол здесь не при чем.
+2
UFO just landed and posted this here
> Я о том и говорю, что если скроллбар попал в окружение таким образом то, что-то пошло не так.
Никак нет) Тенденция превращения длинных многостраничных сайтов в одностраничное приложение есть, и это факт. В таких приложениях у окна скролла нет вообще.
Никак нет) Тенденция превращения длинных многостраничных сайтов в одностраничное приложение есть, и это факт. В таких приложениях у окна скролла нет вообще.
0
Например, на андроиде скроллбар не виден у какого-либо элемента, только у всей страницы. На андроиде 2.3 вообще такое понятие, как скроллбар, знает только страница, а элементы не понимают
overflow: scroll
. Я тоже этим вопросом занимался, искал решение — а решений не было вменяемых, т.к. всё тормозило. Но данный скролл достаточно хорошо себя показал.+1
Не всегда есть возможность влиять на дизайнерские решения, для некоторых проектов кастомный скролл «ОЧЕНЬ важен!!!111», к сожалению.
+3
Chrome 24 Mac OS X 10.8 трекпад — скролл какой-то дерганный, не то что бы совсем, но сразу бросается в глаза.
0
Chrome 24, Mac OS X 10.8, трекпад — скролл в демке плавный.
+4
Так я и не говорю что он не плавный, но такое ощущение что нет 60-ти фпс
0
Если вы об этой ссылке diokuz.github.com/baron/
то небольшое подтормаживание возможно на слабых системах из-за наложения двух градиентов поверх скроллируемого контента.
Например, на Mac Air 2012 i5, fps в Chrome падает ниже 60 только в самом начале скролла. А вот на десктопе с дискретной видеокартой не происходит и этого — fps всегда выше 60.
то небольшое подтормаживание возможно на слабых системах из-за наложения двух градиентов поверх скроллируемого контента.
Например, на Mac Air 2012 i5, fps в Chrome падает ниже 60 только в самом начале скролла. А вот на десктопе с дискретной видеокартой не происходит и этого — fps всегда выше 60.
0
Сафари 6.0.2, Мак. Застревает скролл в некоторых положениях и не реагирует на прокрутку двумя пальцами.
0
Проблема не воспроизводится. Попробуйте посмотреть текущую версию baron diokuz.github.com/baron/
Сам по себе скролл не может застрять в принципе, потому что он — системный.
Сбой может происходить только при выходе курсора за пределы «окна» скроллируемого контента.
Сам по себе скролл не может застрять в принципе, потому что он — системный.
Сбой может происходить только при выходе курсора за пределы «окна» скроллируемого контента.
+1
htmlpreview.github.com/?https://github.com/Diokuz/baron/blob/master/demo/index.html
Не понял куда смотреть. Скролл у меня дефолтный, только колесом почти не крутится.
Не понял куда смотреть. Скролл у меня дефолтный, только колесом почти не крутится.
0
Попробуйте вот сюда: diokuz.github.com/baron/
Это самая новая, но нестабильная версия baron.
Это самая новая, но нестабильная версия baron.
0
А почему на Mac не скрывается сам скроллбар?
0
Вы кстати как нибудь боролись с кастомный скролом внутри текстарии, или вам это не нужно было?
+1
Это хороший вопрос, но пока ничего сказать не могу — исследований не было.
На первый взгляд кажется, что должно работать, но это догадки, и надо проверять.
На первый взгляд кажется, что должно работать, но это догадки, и надо проверять.
0
Было дело, изучал это и писал для этого скрипт.
Для упрощения просто доработал (расширил) для этого jScrollPane.
Это было давненько, в 2007 году, делал я это для проекта yatv.ru
Вот как это выглядит:
![image](https://habrastorage.org/r/w1560/getpro/habr/comment_images/220/237/c42/220237c429a61d7b33fc5295abaa8bcb.png)
Кстати, посмотрел сейчас код и вспомнил, что принцип тот же, что и у автора статьи — я увеличивал размер textarea, чтобы он выходил за пределы блока и поэтому всё было нативно. Если этого не делать, то textarea вроде не переносит overflow:hidden, как-то так, уже не помню, если точно =)
Пользуйтесь js, css
Вызывать так $('textarea').jScrollPane({showArrows:true, scrollbarWidth: 13, scrollbarMargin:0, wheelSpeed: 60});
Для упрощения просто доработал (расширил) для этого jScrollPane.
Это было давненько, в 2007 году, делал я это для проекта yatv.ru
Вот как это выглядит:
![image](https://habrastorage.org/getpro/habr/comment_images/220/237/c42/220237c429a61d7b33fc5295abaa8bcb.png)
Кстати, посмотрел сейчас код и вспомнил, что принцип тот же, что и у автора статьи — я увеличивал размер textarea, чтобы он выходил за пределы блока и поэтому всё было нативно. Если этого не делать, то textarea вроде не переносит overflow:hidden, как-то так, уже не помню, если точно =)
Пользуйтесь js, css
Вызывать так $('textarea').jScrollPane({showArrows:true, scrollbarWidth: 13, scrollbarMargin:0, wheelSpeed: 60});
+1
На iPad'е прведение вашего скролла отличается от поведения системного — если скролл системный, то резким движением страница скроллится до предела, а у вас только на небольшой фрагмент.
0
Да, пока нет инерции, к сожалению.
0
К сожалению, в iOS скролл на элементах реализован плохо (но он хотя бы есть, в отличие от старых версий андроид).
То о чём вы говорите — скролл всей страницы. Он «летает» как надо.
Скролл внутри элементов ведёт себя иначе и «тормозит». Тут я ничего сделать не могу, поскольку на механизм скролла никак не влияю.
На OS X, кстати, скролл элементов по механизму идентичен скроллу окна — пользователи трекпадов уже оценили.
То о чём вы говорите — скролл всей страницы. Он «летает» как надо.
Скролл внутри элементов ведёт себя иначе и «тормозит». Тут я ничего сделать не могу, поскольку на механизм скролла никак не влияю.
На OS X, кстати, скролл элементов по механизму идентичен скроллу окна — пользователи трекпадов уже оценили.
0
Изменение размера страницы не приводит к пересчету размера хреновинки скроллера, зато она пересчитывается при первой попытке прокрутить. Выглядит не очень, но, вроде бы как, должно быть нетрудно исправить?
0
Отличное решение, спасибо
Пример очень сильно шатает при изменении высоты окна браузера, из-за динамической высоты блока (70%). Высота скоролл-бара тоже пересчитывается только после вызова события (mousewheel у вас, вроде). Если это критично ресайз, наверно, придется тоже какой-то слушать.
Пример очень сильно шатает при изменении высоты окна браузера, из-за динамической высоты блока (70%). Высота скоролл-бара тоже пересчитывается только после вызова события (mousewheel у вас, вроде). Если это критично ресайз, наверно, придется тоже какой-то слушать.
0
А как он реагирует подгруженный через ajax контент? высота скролла меняется, новый контент можно прокрутить?
0
хороший вопрос, завел тикет, чтобы автор не забыл)
0
В новой версии уже всё сделано) На днях вкомитаю в гитхаб.
+1
А этот areaaperta.com/nicescroll/ не пробовали?
+1
Ужас получается, когда на странице, которая выше окна браузера, встраивается еще pane с прокруткой, высотой чуть ниже видимой части страницы.
Эти страдают очень многие сайты, и прокрутка становится мучением. Вариант один — жить с браузером ровно того размера, как у автора такой поделки.
Эти страдают очень многие сайты, и прокрутка становится мучением. Вариант один — жить с браузером ровно того размера, как у автора такой поделки.
0
Некоторые отщепенцы, типа меня, пользуются плагином для FX Grab and Drag. Так вот ваш плагин один из немногих, кто не конфликтует и продолжают нормально работать. Колесико, конечно, панацея, но далеко не всегда, особенно если отсутствует кинетическая прокрутка (чем быстрее крутим, тем больше шаг прокрутки).
+1
Просто это не плагин, поэтому конфликты невозможны)
Что касается кинетической прокрутки — на нормальном железе всё давно реализовано. Например на маках, или на некоторых сенсорных мышках (тот же Genius с «синим глазом» вместо колеса).
Идеология барона простая: как крутить — лучше знает железяка под управлением операционки, а как это показывать — дизайнер приложения.
Что касается кинетической прокрутки — на нормальном железе всё давно реализовано. Например на маках, или на некоторых сенсорных мышках (тот же Genius с «синим глазом» вместо колеса).
Идеология барона простая: как крутить — лучше знает железяка под управлением операционки, а как это показывать — дизайнер приложения.
+2
Так и вижу минималистичную версию статьи:
«Кроссбраузерная кастомизация системного скроллбара. …демо…, …аннотированный код…».
«Кроссбраузерная кастомизация системного скроллбара. …демо…, …аннотированный код…».
0
Мне кажется, без js должен быть виден нативный scroll:
<noscript>
<style>
.wrapper {overflow:auto;}
.scroller {overflow-y:visible;}
</style>
</noscript>
А так хорошая идея, напоминает то, как сделали оформление кнопки «обзор» для загрузки файла — там эту кнопку скрывают и двигают над мышью, чтобы при клике она работала нативно =)
<noscript>
<style>
.wrapper {overflow:auto;}
.scroller {overflow-y:visible;}
</style>
</noscript>
А так хорошая идея, напоминает то, как сделали оформление кнопки «обзор» для загрузки файла — там эту кнопку скрывают и двигают над мышью, чтобы при клике она работала нативно =)
0
UFO just landed and posted this here
Ничего подобного (noscript) здесь нет diokuz.github.com/baron/
скрин (js отключён) — прокрутки не видно.
скрин (js отключён) — прокрутки не видно.
0
Автор, пожалуйста, оформите код в виде плагина. jquery plugin patterns
Засорять window плохая практика.
Засорять window плохая практика.
+1
Это можно сделать форком, но независимость baron от jQuery — ключевая его особенность и одно из основных наших требований.
Скажу больше: в будущей стабильной версии, скорее всего, baron вообще никогда не будет использовать jQuery у себя внутри, поскольку требование IE8+ делает возможным использование plain js для добавления классов, стилей и обработчиков событий без заметного увеличения объёма кода.
Сейчас единственный объект в глобальном пространстве — baron с двумя методами. Всё остальное в замыканиях. О других библиотеках baron js мне не известно, поэтому ограничение — только на глобальную переменную baron.
Скажу больше: в будущей стабильной версии, скорее всего, baron вообще никогда не будет использовать jQuery у себя внутри, поскольку требование IE8+ делает возможным использование plain js для добавления классов, стилей и обработчиков событий без заметного увеличения объёма кода.
Сейчас единственный объект в глобальном пространстве — baron с двумя методами. Всё остальное в замыканиях. О других библиотеках baron js мне не известно, поэтому ограничение — только на глобальную переменную baron.
0
То есть, пользователь крутит колесо мыши, под курсор попадает заголовок, фиксируется, и, внезапно, скролл перестаёт работать (точнее, скроллиться начинает вся страница).
Кстати, интересное решение на css, имхо:
pointer-events: none;
Конечно, не настолько таргетированное, как ваше, но со своими достоинствами.
А вообще за статью спасибо. W3C — редкостные мудаки, что не дают стилизировать скроллбар.
+2
UFO just landed and posted this here
Шикарное решение! Правда, кроме неподдержки ie8, есть ещё один досадный недостаток — заголовки вообще перестают реагировать на мышь, и в них даже текст нельзя выделить. Но в комментарии CSS добавлю.
0
О найденных багах в WebKit сообщали?
0
Нет. Баг горизонтального скролла можно назвать фичей, которая позволяет просматривать скрытый контент.
Есть опыт общения с багтрекерами вебкита и ff — тикеты висят годами, ибо не критичные.
Один только баг анимации псевдоэлементов в вебките правили 2 года и 3 месяца — и это только до попадания в канарейку хрома.
Есть опыт общения с багтрекерами вебкита и ff — тикеты висят годами, ибо не критичные.
Один только баг анимации псевдоэлементов в вебките правили 2 года и 3 месяца — и это только до попадания в канарейку хрома.
0
Запись эфира на радио маяк, в общем нам всем гореть в аду :)
+7
barTop: 40, // Ограничитель позиции скроллбара сверху
А есть ли возможность сделать оступы сверху и снизу? Я сейчас верстаю макет и вот у меня примерно такая задача… + трек.
![](https://habrastorage.org/storage2/57e/d0d/d0d/57ed0dd0da445c8f2745df7811520986.png)
+1
Может поздновато, но думаю кому-нибудь это будет любопытно:
www.noinimod.ru/52/ — неплохое, давно созданное, решение.
www.noinimod.ru/52/ — неплохое, давно созданное, решение.
0
Реально ли отключить Барона на iPad, так как там уже стоит webkit-overflow-scrolling: touch для скроллера?
0
Конечно!
Детектим iOs stackoverflow.com/questions/9038625/detect-if-device-is-ios
Далее если iOs — не инициализируем барона.
Можно сделать ход конём и задисплейнонить кастомный скроллбар на ретинистых устройствах. Но там вроде лиса есть.
Детектим iOs stackoverflow.com/questions/9038625/detect-if-device-is-ios
Далее если iOs — не инициализируем барона.
Можно сделать ход конём и задисплейнонить кастомный скроллбар на ретинистых устройствах. Но там вроде лиса есть.
0
Sign up to leave a comment.
Кроссбраузерная кастомизация системного скроллбара