gromo / jquery.scrollbar Goto Github PK

Добрый день, Использовал ваш скролл 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 всегда виден неактивный виндовский скролл.

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?

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!

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) :

http://firstwebsite.comyr.com

Edit: It works in Firefox.

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

@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...

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?

У контейнера, который скроллится убирается рамка в стилях, это не есть хорошо. Приходится создавать дополнительный div-обертку и уже на него вешать скроллбар.

in firefox browser , i'm getting two horizontal scrolls, native and normal scroll,

Please let me know how to disable native one :)

// 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

При старте страницы все хорошо, скролл пявляется. Но если изменить окно(увеличить высоту), то скролл не обрабатывает это событие и контейнер остается маленьких, хотя должен был увеличиться в размере(а если контент весь отображается, то вообще убрать скролл)

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).

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 {

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?

Most scrollbars now support hiding the scrollbar when not in use. See how slimScroll works.

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?

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.

1. Is your plugin able to deconstruct/destroy itself (added dom elements are removed)?
2. Can this be called from outside the plugin (e.g. through event listener on media query change)?
3. Can you give me some hints where i can extend your plugin (i need some orientaion because you don't follow the jquery plugin template)

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 ?

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.

В браузере Microsoft Edge (windows 10) виден стандартный скролл

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?

Think add example using iframe 👍

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.

When I'm install pacakge via bower I get error in https://github.com/gromo/jquery.scrollbar/blob/0.2.5/bower.json#L6.

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?

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?

После ввода текста, скроллбар в нижнем положении, как и положено:

Крутим колесико мыши вверх - никакой реакции. Однако, если прокрутить колесико мыши вниз, то нас перебросит к началу, как будто мы изначально находились вверху:

Firefox shows native scrollbar over custom one on Mac. Issue was reported to Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=926294

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.

After changing direction to rtl scrollbars not changing accordingly. Is there anything that I am missing or is it not supported?

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.

        // 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.

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.

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.

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:

1. JavaScript adds a div to the scrollbar

$('.overlay-scrollbar > .scroll-element .scroll-bar').append($("<div />"));

1. With CSS I give this child of the scrollbar the border radius since CSS3PIE will not support opacity on elements with border-radius (parent has the opacity)

.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!

$content.closest(".elzScroll").scrollbar({onScroll: function(x, y) {console.log(y);console.log(x)}})

scroll и maxScroll всегда равняются нулю при любом движении. Из-за чего невозможно сделать например автоподгрузку контента по достижению скроллом нижней точки.

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

Are there any plans to make this available as an AMD?

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?

I just checked the source at a simple walkthrough, and found something, IMHO, need improvement.

1. umd support
2. more angular support
3. debug property in defaults object is useless
4. log property in browser object depends on the inner variables debug which is not exposed to the user
5. some source(this one, this one) use the charactor var. In my view, it's more important that source can be readable rather than short(which can be minify by other tools like uglify)
6. it there any possibility that write more useful document in the source so that more people(like me:smile:) can participate in improvement

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

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.

Добрый день. После обновления хрома до 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!

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>

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 ?

Привет! Отличная работа!

Есть мнение, что 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)

Возможно окажется полезным. Удачи!

Здравствуйте!
Использую Ваш скролл. Все отлично, за исключением горизонтального скроллбара.
Прочел статью http://habrahabr.ru/post/177399, в которой из комментов узнал, и после, закомментировал следующее условие:
if(!scrollx.isVisible || (d == 'x' && isVerticalScroll(event))){
return true;
}
Работает только при наведении мыши на 'трэк' скроллбара.

Также пробовал задать опцию { 'scrollx':html_element }, теперь скроллится при наведении на весь блок-врапер, но нет самого скроллбара.
Возможно ли активировать прокрутку на весь блок-врапер без скрывания скроллбара?
ПС: Я понимаю, что весь функционал максимально приближен к нативному, но именно в этом аспекте хотелось бы меньшей нативности:)

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.

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.