滚动条不AngularJs工作 [英] Scrollbar not working in AngularJs

问题描述

我用开发中的角，但它不能正常工作，任何一个有一些其他的解决方案滚动条滚动不错指令

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

}）;

推荐答案

这海兰$ C对我来说$ C的工作。

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

我的HTML元素：

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>

我的CSS：

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

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

这篇关于滚动条不AngularJs工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！