Question

我有一个Angular Js应用程序，在平板电脑和移动设备中打开应用程序时我无法向下滚动到页面。在桌面上它只能作为例外工作。初始页面是_Layout.cshtml：

var load1 = loadData1();
var load2 = loadData2();
var load3 = loadData3();
var load4 = loadData4();

allCompleted([load1, load2, load3,load4]).then(function () {
        console.log("All done");
});

和Index.cshtml就是这样返回视图：

@using System.Web.Optimization
    <!DOCTYPE html>
<html @Html.ConditionalManifest()>
<head>
    <meta name="appversion" content="@Helper.ApplicationVersion" />
    <meta name="appmode" content="@(Helper.IsOnline ? "online" : "offline")" />
    <meta name="approot" content="@Url.Content("~/")" />

       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width" />
       <meta name="description" content="SPA Application" />

       <title>@ViewBag.Title</title>

       @Styles.Render("~/Content/css")
       @Styles.Render("~/Content/kendo")
       @RenderSection("Styles", required: false)
       @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
<div id="topDiv" ng-app="angAPP" ng-controller="appController">
    <div class="container" id="bodyWrapper">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">

                <img src="~/Content/Images/img_logo.gif" class="img-responsive navbar-brand" alt="">
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">

                <img src="~/Content/Images/header.png" class="img-responsive navbar-brand" alt="logo view">
            </div>

            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" ng-if="!error">
                <div class="navbar-brand" style="float: right; font-size: 12px;">
                    <a href="javascript:void(0)"></a>{{userName}}
                    <a href="javascript:void(0)"></a>| {{loggedInDate}}
                    <a href="javascript:void(0)"></a>| {{userCompany}}
                </div>
                <div style="float: right;clear: both">
                    <a class="greenText" data-toggle="tooltip" ng-if="!isOnline" title="Sync Status" onmouseover="javascript : $(this).tooltip('show');">
                        <span class="headericons" ng-class="{true: 'processonicon', false: 'processofficon'}[isSyncInProgress]"></span>
                    </a>
                    <a class="greenText" data-toggle="tooltip" title="Message Information" ng-click="showMessages();" onmouseover="javascript : $(this).tooltip('show');">
                        <span class="headericons mesgicon"></span>
                    </a>
                    <a class="greenText" data-toggle="tooltip" ng-if="!isOnline" title="Sync Online Status" onmouseover="javascript : $(this).tooltip('show');">
                        <span class="headericons" ng-class="{true: 'statusonline', false: 'statusoffline'}[isNetworkAvailable]"></span>
                    </a>
                    <a class="greenText" data-toggle="tooltip" title="Notification" ng-click="showNotifications();" onmouseover="javascript : $(this).tooltip('show');">
                        <span class="headericons notificnicon"></span>
                    </a>
                    <a href="javascript:void(0);" id="signout" ng-click="signOut();" ng-if="isAuthenticated">Sign Out</a>
                    <a href="javascript:void(0);" id="signin" ng-click="signIn();" ng-if="!isAuthenticated">Sign In</a>
                </div>

            </div>
        </div>
    </div>
       <div class="navbar navbar-inverse navbar-fixed-top">
           <div class="container">
               <div class="navbar-header">
                   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                   </button>
                   <a href="#/home" class="navbar-brand">http://blog.longle.net</a>
               </div>
               <div class="navbar-collapse collapse">
                   <ul class="nav navbar-nav">
                       <li><a href="#/home">Home</a></li>
                       <li><a href="#/customer">Customer</a></li>
                       <li><a href="#/help">API</a></li>
                   </ul>
               </div>
           </div>
       </div>
       <div class="container body-content">
           @RenderBody()
           <footer>
               <p>Copyright &copy; @DateTime.Now.Year - SPA Application</p>
           </footer>
       </div>
     </div>
       @Scripts.Render("~/bundles/jquery")
       @Scripts.Render("~/bundles/angular")
       @Scripts.Render("~/bundles/app")
       @Scripts.Render("~/bundles/kendo")
       @Scripts.Render("~/bundles/bootstrap")

       @RenderSection("Scripts", required: false)
    </body>
    </html>

溢出-y：滚动/自动没有任何帮助。在页面加载页面加载时滚动正在运行，但是一旦加载了所有内容和数据，它就不会滚动。

有人可以帮我解决这个问题吗。

谢谢，

Angular Js + Bootstrap + Asp.Net MVC应用程序垂直滚动在平板电脑和移动设备中不起作用

0 个答案: