angularjs - AngularJsでスクロールバーが機能しない

Question

Angular のスクロールバー用に開発された素敵なスクロール ディレクティブを使用しましたが、適切に動作しません。他の解決策があります。

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);
    }
};

});

Answer 1

こんにちは、このコードは私のために働きます。

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);
        }
    };
});

私のhtml要素:

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

私のCSS：

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

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