事情的起因是 同事上传一个很宽的table文件,因为手机屏幕宽度有限,因此要求 用户可以水平滚动页面,这样table的内容通过滚动就可以实现啦。

当时感觉很简单 给table外面的容器加个overflow:auto;就可以了呗;

然而,,,安卓是没问题的,ios却不行,死活滚动不了。

于是想到用ionic中的滚动来实现,ion-scroll;

<ion-scroll zooming="true" direction="x">
  <pre class="doc" ng-bind-html="displayDocHtmlData"></pre>
</ion-scroll>

这次在安卓和苹果上都可以水平滚动了。。。

但是,因为是从后台读取的数据,所以,有的内容是很长的,这个时候安卓依然没问题,ios却又死活上下滚动不了。。。

于是网上百度搜索,发现新的方法,不知道原理,,问题反正是解决了,不可思议。。。

 <ion-view hide-back-button="true" cache-view="false" hide-nav-bar="true">
<ion-header-bar cache-view="false" class="bar-positive header-bar">
<button class="button button-clear return-btn" ng-click="goBack()">
</button>
<h1 class="title title-center">文档查看</h1>
</ion-header-bar>
<ion-content ng-init="init()" class="bg-color" overflow-scroll="true">
<ion-scroll zooming="true" direction="xy" style="height:100%;">
<pre class="doc" ng-bind-html="displayDocHtmlData"></pre>
</ion-scroll>
</ion-content>
</ion-view>

在ion-content中加 overflow-scroll="true"

ion-scroll中加入direction="xy" style="height:100%;"

有时间再研究下啦。

ionic overflow:auto失效的更多相关文章

  1. IE6,IE7上设置body{overflow:hidden;}失效Bug

    IE6,IE7下设置body{overflow:hidden;}失效Bug 最近做项目发现在IE7下设置body{overflow:hidden;}后还是会出现纵向滚动条,所以上网查查了,在这里记录一 ...

  2. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  3. 在ie7中overflow:hidden失效问题及解决方案

    css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...

  4. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动

    原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽 ...

  5. IE9父容器overflow:auto时,子容器状态更改导致滚动条下出现额外空间的问题探讨

    IE的每次跟新都会有一些奇葩的bug,我们默默承受了. 这个问题在项目中出现困扰了我近一个星期,这里记录一下.看下面实例 <style> .panel{ width: 200px; ove ...

  6. 小tip:纯CSS让overflow:auto页面滚动条出现时不跳动

    本文转载于张鑫旭博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水 ...

  7. 定位absolute使内联支持宽高(块属性变为内联,内容默认撑开)margin auto 失效

    relative   没脱离文档流 absdute 完全脱离文档流 margin :auto 失效 相对整个文档偏离 相对父级定位 fixed 脱离文档流 与绝对定位特性一致 3.P标快不能包块级标签 ...

  8. overflow:auto/hidden的应用

    一.自适应两栏布局 <!DOCTYPE html><html lang="zh-CN"><head> <meta charset=&quo ...

  9. css ie7中overflow:hidden失效问题及解决方法

    css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...

随机推荐

  1. 下拉菜单demo---参考阿里云首页顶部下拉菜单

    前言: 最近开始学习html+css,准备仿照各大网站写一些demo. 正文: 分析阶段: 如下图: 链接来自于: 阿里云:https://www.aliyun.com/ 实现过程: (一)用css3 ...

  2. 时间轴感----Allen Pike

    动画要跑在60fps下.这意味着每一帧需要花费16ms来跑完(1000ms/60=16).这是要达到原生应用般平滑体验的最基本要求.60 fps是所有的iOS的内置动画运行的速度;这就是为什么滚动在i ...

  3. Linq创建带命名空间、前缀、Soap格式的XML

    关于XML,我也是刚接触,关于一般常见的XML,博客园.CSDN上的资料很多,对于不常见的带命名空间.前缀.Soap格式的XML的描述相对来说寥寥无几,上一篇我写到了对相对复杂的XML的读操作,下面说 ...

  4. Codefroces 750D:New Year and Fireworks(BFS)

    http://codeforces.com/contest/750/problem/D 题意:烟花会绽放n次,每次会向前推进t[i]格,每次绽放会向左右45°绽放,问有烟花的格子数. 思路:n = 3 ...

  5. Innodb 表空间传输迁移数据

    在mysql5.5之前,mysql实例中innodb引擎表的迁移是个头疼的问题,要么使用mysqldump导出,要么使用物理备份的方法,但是在mysql5.6之后的版本中,可以使用一个新特性,方便地迁 ...

  6. treeview 控件使用和数据绑定

    一.TreeViewe 是由多个类来定义的,TreeView组件是由命名空间“System.Windows.Froms”中的“TreeView”类来定义的,而其中的节点(即Node),是由命名空间“S ...

  7. Apache2.4权限配置(原创帖-转载请注明出处)

    ==================说在前面的话================= 1:这次实验使用的php项目是Discuz,Discuz的安装请参照:http://www.cnblogs.com/ ...

  8. socket(二)

    作用域 1 2 3 if 1 == 1:  ​   name = 'alex' print(name) python中是没有块儿作用域的,所以python可以输出name java/c中有块级作用域, ...

  9. React Native for Android 学习笔记

    C:\Users\Vic Lee\AwesomeProject>react-native run-android Starting JS server... Running D:\Android ...

  10. QQ模拟自动登录实现

    QQ模拟自动登录实现 本篇文章主要介绍"QQ模拟自动登录实现(带验证码)",主要涉及到java 实现QQ自动登录(带验证码)方面的内容,对于java 实现QQ自动登录(带验证码)感 ...