Scrollbar not working in AngularJs

Question

I have used developed nice scroll directive for scrollbar in Angular but its not working properly, any one have some other solution

app.directive('niceScrollDirective', function() {
return {
    restrict: 'A',
    scope: true,
    link: function(scope, element, attrs) {

        var niceScrollDefaultObj = {
            "cursorcolor":"#bdbdbd",
            "background" :"#ffffff",
            "cursorwidth": "10px",
            "cursorborder": "none",
            "cursorborderradius": "2px",
            "zindex": 9999,
            "autohidemode": false
        }

        var niceScrollDirectiveObj = scope.$eval(attrs.niceScrollDirective);
        for(var key in niceScrollDirectiveObj){
            niceScrollDefaultObj[key] = niceScrollDirectiveObj[key];
        }
        element.niceScroll(niceScrollDefaultObj);
    }
};

});

What does not working properly mean? Can you show a example of what it does vs what you expect (fiddle, etc) and how you are using it? — brianj, Apr 01 '14 at 20:43
found solution? I am having same issue. Can you share what dependencies you have used for nicescroll in angularjs? I am trying this https://github.com/tushariscoolster/angular-nicescroll — Savan S, Sep 21 '17 at 05:20

score 0 · Answer 1 · answered Sep 07 '14 at 18:59

Hy this code work for me.

cv.directive('niceScroll', function() {
    return{
        restrict: 'A',
        link: function(scope, element, attribute) {

            var nicescrolConf = {
                "cursorcolor": "#bdbdbd",
                "background": "#ffffff",
                "cursorwidth": "10px",
                "cursorborder": "none",
                "cursorborderradius": "2px",
                "zindex": 9999,
                "autohidemode": false
            };

           element.niceScroll(nicescrolConf);
        }
    };
});

my html element:

 <div class="container" nice-scroll>
            <div class="main-content">
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
            </div>
        </div>

my css:

.container{
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.main-content{
    overflow-x: hidden;
    overflow-y: scroll;
}

Scrollbar not working in AngularJs

1 Answers1