jkuri / ngslimscroll Goto Github PK

View Code? Open in Web Editor NEW

41.0 5.0 15.0 521 KB

AngularJS implementation of slimScroll

License: GNU General Public License v2.0

JavaScript 100.00%

ngslimscroll's Introduction

Angular JS slimscroll (no jQuery required)

ngSlimscroll

AngularJS implementation of original jQuery slimScroll

Originally developed by Piotr Rochala (http://rocha.la) jQuery version

This version also supports horizontal scrolling, please see the example for more information about configuring the horizontal scroll.

Example

Check out the live demo

Install

With bower:

$ bower install ngSlimscroll

With npm

$ npm install ng-slimscroll

Example Configuration (bower)

<!DOCTYPE html>
<html ng-app="app">
<body ng-controller="Ctrl as ctrl">

  <div ng-slimscroll>long content ... </div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script type="text/javascript" src="bower_components/ngSlimscroll/src/js/ngSlimscroll.js"></script>
<script type="text/javascript">
var app = angular.module('app', ['jkuri.slimscroll']);
app.controller('Ctrl', [function() {
	var self = this;
}]);
</script>
</body>
</html>

For more information please see http://demo.jankuri.com/ngSlimscroll/

ngslimscroll's People

Contributors

Stargazers

Watchers

Forkers

luanng bhaskarsden277github blqthien matthiassnellings ykushch ipansensoy dongseok0 mattwilliams85 eyecuelab bsciprian vanchituan edskeizer pasinsjr zoraio ulimanova

ngslimscroll's Issues

Demo page down

Hi, i always get a 404 if i try to go to http://demo.jankuri.com/ngSlimscroll/

I really would like to use your extension, but cannot see anywhere how to use it.

you can not set height to 100%

I want to have a scrollbar over the entire length of the screen in my left panel. So I want to set the css height of the scrollbar to 100% this does not work because height expects a number and the code adds + 'px'.
I'm using an adapted version which just does:
element.css({
'overflow': 'hidden',
'width': scope.width,
'height': scope.height,
});

        var wrapper = angular.element('<div></div>');
        wrapper.css({
            'position': 'relative',
            'overflow': 'hidden',
            'width': scope.width,
            'height': scope.height
        });

I think this is a more generic solution because this allows also input like auto (adapt to the height of your children) and 100% (adapt to the height of your parent)...

Node Package Manager

Hi, could you please release this as a node package. I am using browserify to require all my angular modules and it works great but it would help even more if you could release this as a npm package so I wont have to do all kind of trickery to make browserify accept the bower package thanks!

Feature Requests: NG-Repeat + auto-resize, scroll-to, momentum touch scrolling

Jan,
I have always been a huge fan of jq Slimscroll and I appreciate you developing a angular version. Shockingly, the pure angular scroll directives seem to all be incomplete mainly for touch devices. In my case, I really only use a scroll for a chat application.. hints the feature requests.

Support NG-Repeat - I tried this on NG-repeat and it doesn't update
Auto-Resize - basically, if a new DOM node is added or removed, update the H/W
Scroll-to - most chat applications scroll-to bottom. It would be nice to have scroll top|bottom|left|right depending on which scroll you were using... here is a good example: https://github.com/Luegg/angularjs-scroll-glue
Momentum Scroll - I tested this on touch and it was pretty choppy... I am not sure if adding [overflow-y: scroll; -webkit-overflow-scrolling: touch;] would work, but here is a good example of faking this. http://ajoslin.github.io/angular-scrolly/demo/

How to enable rails for scroll bar?

Can you please help me with enabling rails for scroll bar ? Is it possible with this library?

ngSlimscroll for ng-repeat

Hi, can we use this directive on ng-repeat?
If not can anyone suggest a directive that supports scrolling on ng-repeat, with custom css will be more favorable.

Unsubscribe from unneeded events

There are events that could not be needed. It is better to unsubscribe from them.

Minimized JS Version

Looking good. It would be better if the minimized version of JS is included. So that faster to load the JS.

How can i disable mouse scroll?

Doesn't work on mobile

I have tested a demo page demo.jankuri.com/ngSlimscroll/ using Chrome, Opera and Firefox for Android.

How can I use it on the <HTML> elements

<html class="no-js" ng-app="inspinia" ng-slimscroll>

Invalid

Autohide Scrollbar

Hello, I can't seem to be able to autohide the scrollbar and display on hover only, I can't seem to find anything about this in the docs.

ngSlimscroll not working for dynamic content

When working with static content ngSlimscroll works without any issues, but when using the same for data that would be bound dynamically from the controller, it doesn't work well.

not working

not working...

<div ng-slimscroll height="500" enabled="true"  >

    <ul class="ui-list" infinite-scroll="next()" infinite-scroll-parent="true" infinite-scroll-distance="0.5" >
        <li class="item" ng-repeat="it in lastNewss">
            <div app-ui-content-theme="last-news" data-content="it"></div>
        </li>
    </ul>
</div>

not scroll showing....
not mousewell up & down

allowPageScrolling

I believe in slimScroll there is an option for allowPageScrolling, so that when user gets to the end of the div scroll the page will begin to scroll.

Is there a way to get this behavior? Or a way to turn off the automatic scrolling of the div from the mouse wheel? (then the user would have to click and drag the scrollbar).

Thank you all for putting this together.