Ionic<离子滚动>/<离子含量>滚动超过屏幕长度
Ionic <ion-scroll>/<ion-content> scrolls further than screenlength
以下是问题的演示:视频
窗格滚动得太远,它应该在最后一个按钮后停止,但它似乎正好滚动了另一个页面高度。我有多个离子含量,但我用ng class="ng-hide"隐藏了当时不使用的离子含量
<body>
<!-- Five number code -->
<div class="animated fadeInRight" data-ng-class="numberCodeShow">
<ion-content scroll="false" style="position:static;" scrollbar-y="false">
<div id="splash">
<p class="logo">
<span class="leftUpColors" data-ng-style="{'background-color': style.style1}"></span><span class="leftDownColors" data-ng-style="{'background-color': style.style2}"></span><img class="homeimage" data-ng-src="data:image/png;base64,{{style.logo}}"></p>
</div>
<form data-ng-submit="showDashboard(code.fiveNumberCode)">
<ul class="fieldList padding">
<li><p style="text-align: center; padding-top: 10px;">Log in met de 5-cijferige code</p></li>
<li class="loginCodeWrapper">
<div class="input">
<input class="loginCode" data-ng-model="code.fiveNumberCode" type="tel" name="code" maxlength="5" required/>
</div>
</li>
</ul>
<div class="padding">
<button data-ng-style="{'border-bottom-color': style.style1}" style="background-color: #FFFFFF" type="submit" class="button button-block button-default signinbutton">Sign In<i data-ng-style="{'color': style.style1}"class="icon ion-arrow-right-c signinIcon"></i></button>
</div>
</form>
</ion-content>
</div>
<!--// Five number code //-->
<!-- Dashboard -->
<div class="animated fadeInLeft dashboard" data-ng-class="dashboardShow">
<ion-content scroll='true' style="position:static;" scrollbar-y="false">
<div id="splash">
<p class="logo">
<span class="leftUpColors" data-ng-style="{'background-color': style.style1}"></span><span class="leftDownColors" data-ng-style="{'background-color': style.style2}"></span><img class="homeimage" data-ng-src="data:image/png;base64,{{style.logo}}"></p>
</div>
<div class="details">
<p class="welcomeName" data-ng-style="{'border-bottom-color': style.style1}"><i data-ng-style="{'color': style.style1}" style="padding-right: 5px;" class="fa fa-user"></i>Welkom {{user.name}}</p>
<label data-ng-style="{'border-bottom-color': style.style2, 'color': 'black'}">Accordering</label>
<div>
<div class="padding">
<button data-ng-click="showOpenDocuments()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-android-folder-open buttonIconLeft"></i>Mijn openstaande taken</button>
</div>
<div class="padding">
<button data-ng-click="showAllDocuments()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-android-folder buttonIconLeft"></i>Alle Documenten</button>
</div>
<label data-ng-style="{'border-bottom-color': style.style2, 'color': 'black'}">Overige</label>
<div class="padding">
<button data-ng-click="getOrganisations()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-android-contacts buttonIconLeft"></i>Contactpersonen</button>
</div>
<div class="padding">
<button data-ng-click="showImageUpload()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-camera buttonIconLeft"></i>Foto Uploaden</button>
</div>
<div class="padding">
<button data-ng-click="backToFolders()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-document-text buttonIconLeft"></i>Bestanden</button>
</div>
<div class="padding">
<button data-ng-click="showNotifications()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-android-notifications buttonIconLeft"></i>Notificaties</button>
</div>
</div>
</div>
</ion-content>
</div>
<!--// Dashboard //-->
这是一段代码,所以你们可以看到我是如何构建它的。代码中的变量是ng-show
或ng-hide
。在这种情况下为CCD_ 3和CCD_。
我试着在离子卷轴上设置max-height
,但它不起作用。有人知道为什么会出现这个问题吗?
似乎我自己已经解决了这个问题,在上面放了scroll=false,并在下面做了一个高度为100vh的分隔符;
回答A.Vin的问题:
这看起来像我的:
<ion-content scroll=true>
.....
.....
.....
</ion-content>
这导致滚动走得很远,因为有一个更高的分区。
这解决了问题:
<ion-content scroll=false>
<ion-scroll style="height:100vh">
...
...
...
</ion-scroll>
</ion-content>
我希望这也能解决你的问题!如果您有任何其他问题,请随时询问:)
相关文章:
- 在<页眉>标签
- 幻灯片滚动javascript不起作用
- 如何更改<svg>标记为<img>用js标记
- 将视口底部滚动到元素底部
- jQuery Lazy加载动画滚动
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- 如何停止向上滚动<按钮dojoType=“;dijit.form.Button”;type=“;提交”/>在
- 我如何从一个无限滚动的网站抓取图像,其中api是隐藏的,我无法通过使用Inspect Element获得它->网络
- 更改<导航>当向下滚动到具有特定id的元素时
- 想要在滚动后平滑显示导航栏>10
- JavaScript-HTML<选择>单击滚动条的向下按钮时触发的onclick事件
- Ionic<离子滚动>/<离子含量>滚动超过屏幕长度
- Titanium SDK:JavaScript->滚动功能不起作用
- 一个Vimeo<iframe>嵌入劫持滚动/滑动事件
- 防止<输入/>在视线之外,在选择()(或聚焦)时将页面滚动到视图中
- 正在恢复<text区域>重新加载页面上的滚动条位置
- <ul><李>应该只显示在滚动条上
- 如果滚动位置>100
- 图像滚动<img>并且<a>事件
- 滚动到下一个<文章>