无法滚动包含柱形图

时间:2016-10-24 22:14:07

标签: jquery angularjs jquery-scrollify

嘿我在使用AngularJS通过ng-repeat迭代的一组卡上使用Jquery Scrollify(非常棒的顺便说一句)。除了两个包含Highcharts柱形图的卡之外,快照和滚动在所有卡上都能正常工作。最初我假设正面:相对"这将是问题,但即使调整位置静态或初始没有做到这一点。我在这里错过了什么吗?

HTML:

            <div class="card awareness" ng-if="card['awareness-bar']">

                <div class="row">
                    <div class="col-xs-12">
                        <p>You've spent a little more<br>at Text this month.</p>
                    </div>
                </div>


                <div class="row">
                    <div class="col-xs-12">
                        <div id="awareness_bar" style="width: 80%; height:100%; margin: 0 auto"></div>
                    </div>
                </div>


            </div>

Scrollify:

    $(function() {
        $.scrollify({
            section : ".card",
            sectionName: false,
            setHeights: false,
            offset: -50,
            interstitialSection : ".flow-header"
        });
    });

CSS:

.card {
        background: rgba(117, 117, 117, 0.3);
        padding: 14px 11px;
        text-align: center;
        margin-top: 15px;
        box-shadow: 0 2px 3px rgb(65, 64, 66);
    }
  .awareness {

        background-color: rgba(33, 155, 213, 1);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgba(33, 155, 213, 1), endColorstr=rgba(83, 160, 253, 1));
        background-image: -moz-linear-gradient(top, rgba(33, 155, 213, 1) 0%, rgba(83, 160, 253, 1) 25%, rgba(81, 183, 236, 1) 100%);
        background-image: linear-gradient(top, rgba(33, 155, 213, 1) 0%, rgba(83, 160, 253, 1) 25%, rgba(81, 183, 236, 1) 100%);
        background-image: -webkit-linear-gradient(top, rgba(33, 155, 213, 1) 0%, rgba(83, 160, 253, 1) 25%, rgba(81, 183, 236, 1) 100%);
        background-image: -o-linear-gradient(top, rgba(33, 155, 213, 1) 0%, rgba(83, 160, 253, 1) 25%, rgba(81, 183, 236, 1) 100%);
        background-image: -ms-linear-gradient(top, rgba(33, 155, 213, 1) 0%, rgba(83, 160, 253, 1) 25%, rgba(81, 183, 236, 1) 100%);
        background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, rgba(33, 155, 213, 1)), color-stop(25%, rgba(83, 160, 253, 1)), color-stop(100%, rgba(81, 183, 236, 1)));
        padding-bottom: 40px;
        padding-top: 50px;

        p {
            color: #fff;
            font-size: 24px;
        }

    }      

0 个答案:

没有答案