Scrollbar appears on DIV with 100% height about jquery.scrollbar

[gromo]

Can you provide an example on jsFiddle.net?

There are 2 moments to check first:

1. Did you apply styles (height:100% and others) by class and not by id?
2. Did you try to disable scrollbar initialization and look at default browser's scrollbar behavior?

If both moments are done correctly (styles applied by class and native browser scrollbar behavior is what you expect) prepare example on jsFiddle or send me archive with HTML/CSS/JS to look at.

By default scrollbar is updated automatically when content/container size is changed (if you didn't set option "autoUpdate" to false). But if you need to reinitialize it manually, just call scrollbar initialization on your container again without options. Plugin is smart enough to skip custom scrollbar initialization on element that was already initialized - it will just recalculate scrollbar sizes.

[julkue]

Thanks for the reply.

1. Yes, I apply all styles to a class, not to a ID. The class is "panel-inner". I renamed the classname from macosx-style to it. But why is that a problem?
2. I can try this, but I don't think that a browser scrollbar will appear if the height ist 100% like the window and overflow:auto is set

Ok, I already checked to call the plugin again with the stack of elements for the scrollbar before your answer. Unfortunately that didn't help. The look remains like image 2 of my first post

[Evangeline-Rei]

Напишу сюда, так как, судя по всему относится это к текущему топику.
Суть в следующем. Цссы для скроллбара у меня подключены свои.

Когда дело доходит до скролла в скролле, появляется странный баг. А именно:

Когда ставишь классу, на который вешается скролл по умолчанию overflow: auto (для мобильников например, где нету скроллов шириной 17 пикселей, чтобы корректно отображалось)
В цссе для скроллбара для класса scroll-wrapper поставлено свойство overflow: hidden !important;
для класса scroll-content поставлено свойство overflow: scroll !important;.
Соответственно overflow: auto может появиться только в том случае, если скроллбар не инициализирован.
Но когда имеется свойство на классе, на который я инициализирую скроллбар, будь то overflow: auto или overflow: scroll случается то, что внешний скролл делается видимым, по непонятной причине.

Здесь я выделил внутренний скролл розовым цветом http://jsfiddle.net/AZ6CZ/12/

Если же закомментировать overflow: auto / overflow: scroll на диве, на который активируется скролл, то всё вроде как становится на места. Но при этом не инициализируя скролл, всё идёт через оверфлоу визибл, как это задаётся всеми браузерами по умолчанию

http://jsfiddle.net/AZ6CZ/13/

Не могу понять причину такого поведения

[julkue]

I don't speak Russian or Ukrainian. Please write in English

[gromo]

@julmot Please prepare example on jsFiddle.net as Evangeline-Rei did.

@Evangeline-Rei the problem is that you have applied your class .elzScroll to SCROLLBAR BASE CSS rules and it changed the priority of CSS rules. Just return this section back as it is in http://gromo.github.io/jquery.scrollbar/jquery.scrollbar.css.

[julkue]

@gromo Unfortunately I don't get the fiddle to show the bug. However, this is my situation: http://jsfiddle.net/rdr0xpsh/ . Can you give me tips what I should check so that I can maybe debug it myself? I can't post my whole project since it is proprietary for a customer...

To debug this issue it would be good to know firstly how the plugin decides that the scrollbar should appear. Maybe it is a CSS fix.

[gromo]

Look at http://jsfiddle.net/rdr0xpsh/1/ - it works correctly.

Before debugging do not initialize plugin and look at native browser scrollbar behavior - it should be the same as you expected from custom scroll. In your example it won't be so as you set 'overflow' option to 'hidden' - change it to 'auto'

The way I debug plugin:

1. change debug variable value to true - it allows avoid infinity loop if you fuck up with the code
2. console.log(s) after section "// calculate init sizes" to see original container height/width
3. console.log(s) after $.each(s, updateScroll); to see current height/width that were set to content/container

That's all.

[julkue]

As I already said I don't get the fiddle to show the bug. The fiddle is just to show my environment. I thought maybe you can determine any mistake that could create that bug.

Thank you for this tips. I'll keep them in mind and try to debug my issue.

[julkue]

Unfortunately I can't debug the issue. I set the overflow property to auto so that I see the browser default scrollbar. It works great without the plugin. After initializing the plugin I get the already known problems. Also if I remove the complete HTML-DOM-Nodes inside the content of the panel-inner (in your example called maxosx-scrollbar or something like that) the scrollbar will not refresh. Instead it will look like screenshot 2 (small scrollbar even when no content is displayed).
As you can see panel-inner is empty:

I also added the console.log(s) things at the places you told me. At the time when the scrollbar will not refreshed it will also not log any object. The last object that has been logged before the error occured was:

So unfortunately I'm at the startpoint now.

Any other options?

[gromo]

Your content is moved to DIV with class scroll-content as I see from screenshot, and it has height applied. So, everything looks correct from my point of view according HTML DOM structure. I can't tell more without source codes of your page. I don't need entire application, just one page that you can save right from your browser.

[julkue]

All inline styles are made by your plugin.
However, would it be helpful to offer a remote session? Because of copyright issues I can't post the source code of the application since it is a application for a customer. And as you could see in the fiddle a simulated problem will not work.

[gromo]

Send me email with remote session credentials to [email protected] with date/time/timezone you will be available. I will try to allocate some time for you.

[julkue]

Just send you a email :)

[julkue]

Hello together,

I've had a remote session with @gromo today. He had a very important tip for that issue. On the scroll-element the style attribute with display:block; was created from a script. The scrollbar plugin will never create such style attributes. It will show and hide the scrollbar with CSS classes. That means, that it is a script from my application that shows/hides the scrollbar in the wrong situations and therefore the scrollbar will appear not correctly.

I found out which script is responsible for this behaviour. It is a script that shows/hides navigation items (like a DropDown where the scrollbar should appear if there is not enough space). Unfortunately the developer who created the script (another guy in my company) selected all elements including div-elements from the scrollbar to hide/show. The correct way would be only to select the list-elements from the DropDown.

I'm sorry for creating this issue since it was a problem from the environment, not from the plugin. Also I want to thank @gromo for helping me with this remote session. Many thanks!!