ziscloud / angular-slimscroll Goto Github PK

I have the scrollbar implemented on the initial view/state of my project which is using ui.router. What's getting rendered is a json data list from our API in a blog style format, and with ng-repeat. The scrollbar gets applied correctly and since we're using height:auto for responsiveness, everything works fine initially.

However when I click a button and go to a different view/state, and then come back to that same view/state, nothing is shown. Further looking into the DOM inspector, I find that height:auto is getting ignored and the height = 0. The content is there, but it's appearing to be "hidden" because of the scroll-body div being set to height:0.

I'm wondering if the scrollbar directive is getting executed before the div is getting re-rendered with the json data. Although this wouldn't make sense because everything is fine on the initial view. Its just that when you leave it to view another view/state, and then come back to it, it's not refreshed/updated correctly. Any clues as to why this is happening, or what can be done to do a force refresh/update while using height:auto?

Thanks

Hi, I'm pushing children into the container having a slimscroll toolbar and would like to do a scrollTo: $bottom afterwards in my controller, like so:

$scope.mycontent.push(newelem);
// update myscrollwindow to scroll to bottom:
var scrollDiv = jQuery('#mycontainer');
var scrollToVal = scrollDiv.prop('scrollHeight') + 'px';
scrollDiv.slimScroll({ scrollTo : scrollToVal });

This obviously doesn't work as the height is not yet updated because the dom is not re-rendered at that point. Any idea how I would update slimscroll right after pushing elements?

I have a message/inbox UI in angular that is shown when a user clicks a button. I want to apply slim scroll to the message list. Does this angular version support initialising after an element has been shown on a page?

Slimscroll's height does not adjust on window resizing. Is there something that I am missing or is it not supported? If later, can it be fixed?

Any chance you could publish this to NPM?

When set auto height, When Window resize got double scroll bar, window default scroll bar and slimscroll bar.

Hey man,

I noticed there are two scrollbars being initiated.
I am using the scrollbar inside a div with an ng-if directive

Any ideas what might be going wrong?

Console says that slimScroll is undefined. I figured out that slimScroll() only work on jQuery objects, so I'm writing a fix for this. Anyways, good job here! Cheers!

As released: https://github.com/rochal/jQuery-slimScroll/releases

Hello I have used slim scroll and in that one I have used simple HTML scroll in small div, but when I am scrolling div that time only scroll slim scroll. Inner scroll not working so what can I do?

Thank you.

Is there any way to hide only the scroll bar (not disable) when it isn't need? E.g. a dynamic list whose the items are not enough to make that container scroll.

Has anyone ever been able to use this option, start: 'bottom'?

Options as:

color: '#CCC',
height: '400px',
distance: '0',
alwaysVisible: 'true',
touchScrollStep : 50,

works well...... but start: 'bottom' not working.

• thanks for the help.

Hello, I'm getting double scroll bars on 1.1.0 version

I'm using the slimscroll directive which works fine and the extra bar is <div class="slimScrollBar"> and it seems it is the default wrapper element. Could you please advise if I need to upgrade to the latest version (1.1.3) or is there any idea? Thanks

Always nice to have it :)

How do I use this directive and slimscroll in combination with ui router?

As it stands now when I go to a different state using an ui-sref inside a slimsrolled div the page is blocked from scrolling entirely in the new state.

Version info:

Angular:                   1.3.15
ui-router:                 0.2.13
jQuery:                    1.11.2
slimscroll:                1.3.2
angular-slimscroll:        latest

template (simplified):

<div class="scroll-body" slimscroll="{height: 250}">
    <a ui-sref="base.cases.detail({ id: mycase.id })">{{ mycase.id }}</a>
</div>

hi, i try to add slimscroll="{allowPageScroll:true}" prop to options but not working until setting noWatch prop to true:( slimscroll="{allowPageScroll:true,noWatch:true}"
can u check it for me??

i changed and tried it with original silmscroll example page(allow-page-scroll.html)

How can i add slimscrol event in this directive

The options which i put doesnt seem to take any effect on the slimscroll. The touch responsize is very bad too

I'm getting this error:
TypeError: undefined is not a function
at refresh (http://localhost:9000/assets/javascripts/app/directives.js:249:30)
at init (http://localhost:9000/assets/javascripts/app/directives.js:254:21)
at link (http://localhost:9000/assets/javascripts/app/directives.js:278:17)
at nodeLinkFn (http://localhost:9000/assets/javascripts/lib/angular/angular-1.2.27.js:6736:13)
at compositeLinkFn (http://localhost:9000/assets/javascripts/lib/angular/angular-1.2.27.js:6130:13)
at compositeLinkFn (http://localhost:9000/assets/javascripts/lib/angular/angular-1.2.27.js:6133:13)
at compositeLinkFn (http://localhost:9000/assets/javascripts/lib/angular/angular-1.2.27.js:6133:13)
at compositeLinkFn (http://localhost:9000/assets/javascripts/lib/angular/angular-1.2.27.js:6133:13)
at nodeLinkFn (http://localhost:9000/assets/javascripts/lib/angular/angular-1.2.27.js:6730:24)
at compositeLinkFn (http://localhost:9000/assets/javascripts/lib/angular/angular-1.2.27.js:6130:13)

There's slimscroll-watch attribute which is quite handy in some situations but isn't documented. I think it's a good idea to add it to documentation

i am using this
<div class="scroll-body" slimscroll="{width: '80px'}" > for custom height but it is not working it is taking its default height

As it has left and right, it should also provide bottom and top.
There is any chance to push some changes adding horizontal scroll feature?

Could you please provide git version tags so that one can refer to a certain version of angular-slimscroll when installing it via bower?

Thanks and best regards,
Patrick

Youu have a package conflict with the following package on npm:

https://github.com/aiska/angular-slimScroll

Angular-slimscroll can be easily added via this:

<div slimscroll="{slimscrollOption: value}">
    Scroll Content
</div>

But on certain cases I need to disable or remove it. How can that be done?