gromo / jquery.scrollbar Goto Github PK
View Code? Open in Web Editor NEWjQuery CSS Customizable Scrollbar
License: GNU General Public License v2.0
jQuery CSS Customizable Scrollbar
License: GNU General Public License v2.0
Are there any plans to make this available as an AMD?
Been screwing around with this for waaay to long tonight wondering why the heck it doesn't work. Either there is css styling in your style.css that is required or...
You have inline css in your demo pages, ../includes/style.css attached in the head, then there is the ../jquery.scrollbar.css which isn't referenced, but looks to contain the different 'types' all-in-one. If you remove the style.css from the demo page nothing works so there must be something in there that is 'needed'.
I've put an extremely slimmed down version of the basic.html below... what needs to be done given this example for this to work properly?
<!DOCTYPE html>
<html>
<head>
<title>jQuery Scrollbar Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="../jquery.scrollbar.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div style="height:150px; width:75%;">
<div class="scrollbar-inner">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
</div>
</div>
<script src="../includes/jquery.js" type="text/javascript"></script>
<script src="../jquery.scrollbar.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.scrollbar-inner').scrollbar();
});
</script>
</body>
</html>
I have code css like that
#filter{
width: 20%;
min-height: 1px;
padding-right: 0px;
padding-left: 1px;
margin-top: 34px;
margin-left: 8px;
z-index: 2;
position: fixed;
overflow: auto;
max-height: 300px;
}
but scrollbar not display and its change my css
При старте страницы все хорошо, скролл пявляется. Но если изменить окно(увеличить высоту), то скролл не обрабатывает это событие и контейнер остается маленьких, хотя должен был увеличиться в размере(а если контент весь отображается, то вообще убрать скролл)
Hi Gromo,
Thanks for this plugin, great one. I know that FF for Mac is not supported but the plugin doesn't work anymore for Chrome and Safari as well (on Mac).
here is my versions:
Chrome: Version 40.0.2214.115 (64-bit)
Safari: Version 8.0.3 (10600.3.18)
I haven't investigate yet but at least you are aware of that.
Best regards
Edit:
it's ignored because browser.overlay is true for Chrome and Safari now
in firefox browser , i'm getting two horizontal scrolls, native and normal scroll,
Please let me know how to disable native one :)
This script works fine except on Firefox (37.0.1) mac (Maverick but doesn't work on Yosemite too).
Is there any fix for that ?
I need to know if a element inside the scrollbar is visible or hidden. I've tried to use jQuerys :visible
and :hidden
selectors but both will not work. Is this a known thing?
Iam using your plugin in a full screen responsiv percentage height website and its the only jquery plugin (that i know) that is able to work as a smooth dropin without changing the whole website layout. Great job.
Здравствуйте!
Использую Ваш скролл. Все отлично, за исключением горизонтального скроллбара.
Прочел статью http://habrahabr.ru/post/177399, в которой из комментов узнал, и после, закомментировал следующее условие:
if(!scrollx.isVisible || (d == 'x' && isVerticalScroll(event))){
return true;
}
Работает только при наведении мыши на 'трэк' скроллбара.
Также пробовал задать опцию { 'scrollx':html_element }, теперь скроллится при наведении на весь блок-врапер, но нет самого скроллбара.
Возможно ли активировать прокрутку на весь блок-врапер без скрывания скроллбара?
ПС: Я понимаю, что весь функционал максимально приближен к нативному, но именно в этом аспекте хотелось бы меньшей нативности:)
I have initialized jquery scrollbar on a table. table is having horizontal scroll only. I can add/remove rows dynamically on button click. On adding row there is no issue, however on removing rows, there is empty space at the bottom.
Is there any solution?
Hi,
AngularJS directive make my scroll bar invisible but all other functionality work fine just no scroll bar
Do i need to change something in css before using this directive?
When I'm install pacakge via bower
I get error in https://github.com/gromo/jquery.scrollbar/blob/0.2.5/bower.json#L6
.
// do not init if in ignorable browser
if ((browser.mobile && o.ignoreMobile)
|| (browser.overlay && o.ignoreOverlay)
|| (browser.macosx && !browser.webkit) // still required to ignore nonWebKit browsers on Mac
) {
return false;
}
из-за последней проверки browser.macosx && !browser.webkit
кастомные скроллы не редерятся в невебкит браузерах, на Маке, например в Firefox и opera 12
The scrollbar (even with simple-outer) will overlap fixed positioned side-navigations. Sure I can set a right-property with the width of the scrollbar but what if the scrollbar isn't necessary? Then there would be a white space. What is the preffered way to handle objects that are position:fixed;? Scrollbars with "simple-outer" should act like real browser scrollbars and re-calculate fixed elements to fit in the scrollbar content.
@gromo
As you can see in the screenshot,
the scrollbar will also appear on DIVs where no scrollbar is necessary, e.g. on 100% height DIVs.
Also the scrollbar seems not to update correctly, as you can see here:
How to avoid that?
I would like to try to update the plugin automatically or just remove and reinitialize it, but unfortunately you have not documented such parts...
Hello,
previously I used the perfectscrollbar but since it is not IE8 compatible I gave jquery.scrollbar a try. Unfortunately I have problems with it.
I have a overlay with a navigation. This navigation should be 100% height. Unfortunately:
.scroll-wrapper{
max-height:100%;
height:auto;
}
and also
.scroll-wrapper{
height:100%;
}
will not work.
@gromo What can I do to have a scrollbar with 100% height?
Hi,
I have a sidebar menu with a submenu, which can be toggled by clicking the menu item.
http://jsfiddle.net/mfwonghk/8qu0j2p3/
In FF & IE, the native scrollbar is visible briefly after hiding the submenu. I can minimize the visible time by setting the update timeout to 0 but I think it is not a good idea.
Привет! Отличная работа!
Есть мнение, что parseInt далеко не всегда считает основание системы счисления 10, иногда это бывает 8.
Я предлагаю уточнить поддерживаемые версий браузеров в документации или использовать жесткое указание 10 в качестве системы счисления.
http://www.w3schools.com/jsref/jsref_parseint.asp
Older browsers will use the octal radix (8) as default when the string begins with "0". As of ECMAScript 5, the default is the decimal radix (10).
например
|| s.x.offset != (parseInt(c.css("left"), 10) || 0)
вместо
|| s.x.offset != (parseInt(c.css("left")) || 0)
а вообще я лично стараюсь использовать хелпер dec вместо parseInt, вида
function dec(num){ return parseInt(num,10) }
и тогда в коде
|| s.x.offset != (dec(c.css("left")) || 0)
Возможно окажется полезным. Удачи!
Hi Gromo,
first of all, this is the BEST scrollbar for me. But there is a problem with 'scrollbar-outer' (maybe others, too). Your JS removes the margin right and at the bottom. Thats ok, but when you remove the margin, it would be nice to add it to the container, so that the design won't break. At the moment the boxes will have no margin between them.
Добрый день. После обновления хрома до 39 версии, контейнер scrollbar-inner стал давать margin -17 (размер дефолтного скролла), хотя сам скролл через css размер задан 0px.
Если убрать цсс размера скролла, то всё встаёт на место, но тогда в опере всё едет.
Hey,
I've just found the bug you fixed in 0.2.5, and looked at your jquery plugin repo page here, because this is the point I downloaded the project from, and thought I have to fix it by my self, because there is no update. By chance I saw, that you released a new version, that fixed the bug (real thanks for that, saved me some hours) and want to ask you, whether you could update the jquery plugin repo page https://plugins.jquery.com/scrollbar/, so the people know there is a fix.
Thanks and good job!
Hi, I've spotted that since version 0.2.6 the following default values have been changed to the 'true', instead of 'false': 'ignoreMobile' and 'ignoreOverlay'.
So, when I'm updated to latest version, i was really confused why everything has been stop working on mobile :)
So, please could you reflect those changes in your change log, maybe it may help someone else.
Many thanks.
Your scrollbar helped me a lot on what I am trying to accomplish on my first website.The only issue is that my 'position: fixed' video at the bottom of the page won't play in any browser (I tried other position properties too).I hope you can help me, here is my website (sorry for free hosting ads) :
Edit: It works in Firefox.
Firefox shows native scrollbar over custom one on Mac. Issue was reported to Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=926294
Добрый день, Использовал ваш скролл https://github.com/gromo/dslib/tree/master/jquery.scrollbar , но, к сожалению, нашел неприятную особенность. Замечена только в IE (проверял в ие9 и ие11). Скролл ведет себя странно, если контент укладывается в размеры блока, верткальная полоса прокрутки появляется, а если контент полностью удалить из контейнера, иногда появляется горизонтальная полоса прокрутки (кастомные, не виндовские). Такое чувство, что где-то идёт смещение на 1 пиксель. Причем неважно, указывается ли классу scroll-wrapper свойство css } max-height.
Возможно ли как-то это пофиксить?
Пример по ссылке http://lelouch.ru/scr/
Скриншот для понимания, если не удастся воспроизвести http://lelouch.ru/scr/screen_example.png
И ещё хотел бы задать вопрос.
Возможно ли реализовать вариант, чтобы корректно работал класс .scroll-content со свойством css { overflow: auto } а не { overflow: scroll }? Чтобы оно как-то детектилось, есть ли виндовский скролл, или же его нет, чтоб от этого шел рассчет.
Просто очень неприятная ситуация возникает, когда у scroll-wrapper { height: 100% } , соответственно {margin-bottom -17px} не может работать и в FireFox и IE всегда виден неактивный виндовский скролл.
У контейнера, который скроллится убирается рамка в стилях, это не есть хорошо. Приходится создавать дополнительный div-обертку и уже на него вешать скроллбар.
I just checked the source at a simple walkthrough, and found something, IMHO, need improvement.
debug
property in defaults
object is uselesslog
property in browser
object depends on the inner variables debug
which is not exposed to the userВ браузере Microsoft Edge (windows 10) виден стандартный скролл
Perhaps an edge-case, but I (and a lot of people) use * { box-sizing: border-box; } as a general CSS rule. In this case, IE9 reads the scroll bar sizes as 34px instead of 17px. This is fixed by adding to line 625 of jquery.scrollbar.js an additional rule of "box-sizing": "content-box" in order to override other box-sizing rules used in responsive sites.
We are using scrollbar plugin in multiple places of the application and want to enable it for mobile globally. Could you please help me out.
When using this plugin as a body-scrollbar in combination with parallax plugins the problem occurs that the $(window).scroll()
-event doesn't get fired. Of course this is correct, because the only thing that fires the scroll-event is the scrollbar-div. However, this makes it impossible to use such plugins. Is there any workaround?
When I run controller tests using rails minitest I get the following error:
ActionView::Template::Error: Invalid CSS after "...round: url(data": expected comma, was ":image/svg;base..."
I found the svg reference in the css jquery.scrollbar.css file:
background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmVmZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
Scrollbar displays correctly in chrome and safari.
// do not init if in ignorable browser
if ((browser.mobile && o.ignoreMobile)
|| (browser.overlay && o.ignoreOverlay)
|| (browser.macosx && !browser.webkit) // still required to ignore nonWebKit browsers on Mac
) {
return false;
}
Why are certain browsers being "ignored"? I'm after consistent scrollbars across at least the major browsers.
I've integrated your plugin into my application and I see that in Chrome on MacOS, the conditional above is evaluating to true and the plugin doesn't add the elements necessary to show the scrollbars. On IE on Windows, however, the conditional evaluates to false, allow the elements to be added.
For shiggles, I commented out the lines shown above and everything works find in both browsers.
I am missing something here?
Thanks for the help.
Hi !
I just have updated my bower install :
jquery.scrollbar#0.2.6 bower_components/jquery.scrollbar
└── jquery#2.1.3
But version 0.2.6 date from november the 24th. Then the url(data... base64)
on several lines still exists :
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi
8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2
VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaW
VudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2
Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMC
UiIHN0b3AtY29sb3I9IiNlOGU4ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD
0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdm
c+);
Pull request #25 is right and should be released.
Cheers!
Most scrollbars now support hiding the scrollbar when not in use. See how slimScroll works.
After changing direction to rtl scrollbars not changing accordingly. Is there anything that I am missing or is it not supported?
Hi, I am having an issue at the moment and struggling to find an answer. I am using Jquery UI Sortable inside a container that has the jquery.scrollbar plugin applied to it. When i drag an item to the bottom edge of the scroll area I would expect the scroll area to auto scroll - it doesn't. The list is structured like this:
<div class="scroll-area">
<div class="list-container">
<div class="list-item">Item 1</div>
<div class="list-item">Item 1</div>
...
</div>
</div>
with jquery.scrollbar applied to scroll-area. When i drag a list-item to the bottom edge of the scrolling scroll-area, then because the bottom edge of list-container is actually in the overflow, jquery.sortable cannot work inside the scroll-area container.
Do you have any suggestions to get around this?
I get the following exception when attempting to use Require JS:
Uncaught Error: Mismatched anonymous define() module: function ($) {
'use strict';
// init flags & variables
var debug = false;
var browser = {
data: {
... continued...
If I add a module name to the define invocation, the exception goes away.
Old (line 16)
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else {
New
if (typeof define === 'function' && define.amd) {
define('jquery-scrollbar', ['jquery'], factory);
} else {
Think add example using iframe 👍
I have a sidebar with 100% height and a item menu inside.
http://jsfiddle.net/mfwonghk/ku9cmv56/
In 0.2.6 the native horizontal scrollbar is hidden. After updating to 0.2.8 it is visible in IE & Firefox.
Is this a bug or I need to change my CSS?
So I have some HTML that I load with AJAX and then store in an object. When I attach the HTML to the body the first time I initialise the plugin:
$html.scrollbar();
The problem is that the plugin stops working when I detach the HTML and attach it again to the body. I've tried initialising it again but it does not work either.
Is this a bug or am I missing something?
TIA
Hi,
I'm having some hard time trying to make the bar appear when used inside a list,
with its li children's height set as 33.33333% (and 4+ li in a column).
The overflow isn't detected, the scrollbar doesn't show.
When set in px, no problem at all.
Here is a fiddle of the issue :
http://jsfiddle.net/sylvainjule/zwL0pLng/4/
I currently get it working by previously formatting the height with jQuery :
http://jsfiddle.net/sylvainjule/n3h01tvx/46/
But wonder if the issue has already shown up / there is a cleaner fix ?
When i resize my window or use the Mobile-Debugger on FF (Strg+Shift+M) and change the size, a second scrollbar appears. When i switch back to full view, the original scrollbar (browser default) is shown and the jquery-scrollbar, too.
In case of a transparent outer scrollbar setup, the original browser scrollbar stays visible.
Just try:
.scrollbar-outer > .scroll-element {background:transparent}
There is a workaround to use inner scrollbar, create a right margin on the scroll content, thereby creating an empty area on the right side so it looks like an outer scrollbar.
Any better idea how to hide the browser scrollbar?
I am facing one issue related to scroll bar.
My HTML structure is like :
<div class="questiondiv scrollbar-outer">
<div class='qdiv'>
</div>
<div class='qdiv'>
</div>
<div class='qdiv'>
</div>
<div class='qdiv'>
</div>
</div>
In an .js file on document.ready()
I am calling $('.scrollbar-outer').scrollbar();
and after that I am setting 'display:none' to some div having class 'qdiv'. at a time only one div having class 'qdiv' will be having 'display:block'.
Problem is, when page get loaded, at that time the 'qdiv' which is currently having display:block
is come with Customizable Scrollbar but when I set display:block to other qdiv
Customizable Scrollbar will not work (default scrollbar get active).
In IE8 no border-radius is supported. But there are workaround like CSS3PIE. Unfortunately the plugin doesn't use it. Please support border-radius for IE8.
Until it's implemented I builded the following workaround:
$('.overlay-scrollbar > .scroll-element .scroll-bar').append($("<div />"));
.overlay-scrollbar > .scroll-element .scroll-bar {
display: block;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
-ms-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.overlay-scrollbar > .scroll-element .scroll-bar > div{
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
@include pie();
background-color: #6C6E71;
display: block;
width:100%;
height:100%;
}
This will work in IE8! Please support it by default!
My question is, why I have the option to disable the scrollbar initialization on mobile devices. Since I set "overflow:hidden;" on the scroll element to prevent the default scrollbar it would make no sense then to not show up the custom scrollbar. This would show nothing.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.