ziscloud / angular-slimscroll Goto Github PK

angular directive for jquery slimscroll

License: MIT License

angular-slimscroll's Introduction

angular-slimscroll

This is a small directive to allow the use of jquery slimScroll plugin (https://github.com/rochal/jQuery-slimScroll) in angular. Get more detailed information about slimScroll, please visit: http://rocha.la/jQuery-slimScroll

Install

This plugin can be installed via bower. If you already have the bower installed in your machine, you can install it by the following command, if you are not familiar with bower, please refer to http://bower.io/ to learn more about the bower itself.

bower install angular-slimscroll --save

Then add ui.slimscroll as a dependency for your app:

var app =  angular.module('app', ['ui.slimscroll']);

Usage

<div class="scroll-body" slimscroll="{slimscrollOption: value}">
  Scroll Content
</div>

Options

noWatch - Prevent directive from watching the option object
width - Width in pixels of the visible scroll area. Stretch-to-parent if not set. Default: none
height - Height in pixels of the visible scroll area. Also supports auto to set the height to same as parent container. Default: 250px
size - Width in pixels of the scrollbar. Default: 7px
position - left or right. Sets the position of the scrollbar. Default: right
color - Color in hex of the scrollbar. Default: #000000
alwaysVisible - Disables scrollbar hide. Default: false
distance - Distance in pixels from the edge of the parent element where scrollbar should appear. It is used together with position property. Default:1px
start - top or bottom or $(selector) - defines initial position of the scrollbar. When set to bottom it automatically scrolls to the bottom of the scrollable container. When HTML element is passed, slimScroll defaults to offsetTop of this element. Default: top.
wheelStep - Integer value for mouse wheel delta. Default: 20
railVisible - Enables scrollbar rail. Default: false
railColor - Sets scrollbar rail color, Default: #333333
railOpacity - Sets scrollbar rail opacity. Default: 0.2
allowPageScroll - Checks if mouse wheel should scroll page when bar reaches top or bottom of the container. When set to true is scrolls the page.Default: false
scrollTo - Jumps to the specified scroll value. Can be called on any element with slimScroll already enabled. Example: $(element).slimScroll({ scrollTo: '50px' });
scrollBy - Increases/decreases current scroll value by specified amount (positive or negative). Can be called on any element with slimScroll already enabled. Example: $(element).slimScroll({ scrollBy: '60px' });
disableFadeOut - Disables scrollbar auto fade. When set to true scrollbar doesn't disappear after some time when mouse is over the slimscroll div.Default: false
touchScrollStep - Allows to set different sensitivity for touch scroll events. Negative number inverts scroll direction.Default: 200
onScroll - Allows to execute a function from the controllers scope on scroll event. Example: onScroll: onScrollEvent

License

angular-slimscroll is released under the MIT License. Feel free to use it in personal and commercial projects.

angular-slimscroll's People

Contributors

Stargazers

Watchers

angular-slimscroll's Issues

When window resize, Height auto Issue

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

Options do not work

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

Refresh/Update doesn't seem to be fully working.

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

Update slimscroll dependency to 1.3.3

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

Add slimscroll-watch attribute to documentation

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

customization is not working

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

slimScroll() is not a function

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!

Publishing to NPM

Any chance you could publish this to NPM?

double scrollbar added

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?

is it possible to add horizontal scroll?

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?

npm package not correct

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

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

allowPageScroll is not working???

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)

Hide scrollbar when it isn't need

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.

How can i bind event

How can i add slimscrol event in this directive

Use slimscroll in combination with ui router

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>

Update scrollbar after pushing elements

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?

Disable 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?

Add bower installation instructions

Always nice to have it :)

start: 'bottom' option does not work.

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.

Initialise slimscroll later or after an element has been shown

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?

Does not work

and lines 249 thru 278 of your directive are these lines:

line 249=> $($elem).slimScroll({ destroy: true });
$($elem).slimScroll(option);
};
var init = function () {
line 254=> refresh();
if ($attr.slimscroll && !option.noWatch) {
off.push($scope.$watchCollection($attr.slimscroll, refresh));
}
if ($attr.slimscrollWatch) {
off.push($scope.$watchCollection($attr.slimscrollWatch, refresh));
}
if ($attr.slimscrolllistento) {
off.push($scope.$on($attr.slimscrolllistento, refresh));
}
};
var destructor = function () {
$($elem).slimScroll({ destroy: true });
off.forEach(function (unbind) {
unbind();
});
off = null;
};
off.push($scope.$on('$destroy', destructor));
line 278= > init();

Is this the correct HTML syntax to call the directive:

If not can you please provide a sample syntax of calling the directive?
Thank you
Gary

Double slimscrolls

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