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

滚动条在AngularJs中不起作用

1 个答案: