事情的起因是 同事上传一个很宽的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. lucene中FSDirectory、RAMDirectory的用法

    package com.ljq.one; import java.io.BufferedReader;import java.io.File;import java.io.FileInputStrea ...

  2. JS的window.onload与JQuery的$(document).ready(function(){})的区别

    前段时间去面试被问及JS的加载(onload)与jQuery中加载(ready)方法的区别,瞬时懵逼了,关于这个知识点平时还真没怎么注意. 最近先来无事便查了一下资料, onload 事件(W3c上给 ...

  3. nfc相关

    nfc普通读卡写卡按厂商API操作即可,但是牵扯到NDEF的读写就另当别论了,算是二次开放了,android手机有成熟的接口,.net也有一些,github上有一个,还没研究, https://git ...

  4. 转:Log4j使用

    转:https://my.oschina.net/kkrgwbj/blog/638780 日志是应用软件中不可缺少的部分,Apache的开源项目log4j是一个功能强大的日志组件,提供方便的日志记录. ...

  5. 用PHP调用Oracle存储过程方法

    //建立一个TEST表CREATE TABLE TEST (  ID        NUMBER(16)        NOT NULL,  NAME      VARCHAR2(30)      N ...

  6. <input type='file'/>把默认样式改成框框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 利用反射+AOP,封装Basehandler

    AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的一个热点, ...

  8. 学习C语言感悟

     还记得刚上第一节C语言课的时候,基本上一节课只有最后10分钟的内容听懂了.在此之前从没接触过C语言,想说看看书预习一下吧,可是完全找不到条理,发现老师也不是按书上的顺序讲的.当时就特别着急,想说难道 ...

  9. 基于Clang的Source to Source源代码转换(一)

    Clang中包含了非常多的关于抽象语法树(AST)的访问和操作的类和接口.我们程序开发人员可以直接通过继承其中的某些类,重写其中的关键成员方法,从而形成我们自己的对抽象语法树的操作. 那么,首先我们简 ...

  10. er3

    <html xmlns:v="urn:schemas-microsoft-com:vml"xmlns:o="urn:schemas-microsoft-com:of ...