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

Hy这个代码对我有用。

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