新手问题 有人用 Ionic 开发 App 吗?请教 overflow-y: scroll;在手机屏幕上不生效怎么办?

chairy11 · 2015年12月25日 · 最后由 crazystone 回复于 2016年05月26日 · 8533 次阅读

有人用 ionic 开发 APP 吗? 整个界面 ionic 设置了 scroll,然后页面里面我还有一个 div,这个也想设置为可滚动的。 如图:

ul.doughnut-legend{
                        position: absolute;
                        top: 0;
                        right: -10px;
                        width: 130px;
                        height: 150px;
                        overflow-y: scroll;
                        -webkit-overflow-scrolling: touch;
}

在用 chrome 调试时,是能滚动的。但我发现,mac 上,我是用三个手指滚动整个界面,用两个手指滚动这个 div,所以看起来正常。

但到手机屏幕上,就是单个手指触摸滚动的,可能是两者无法区分?反正就是,手机上,该页面这个内部 div 就无法 scroll 了……

大家见过这个情况么?有解么?

ionic 是把所有的 touch events 都统管起来,然后区分什么是 click, 什么是 scroll, scroll 的力度, 还有其他各种手势。

没有遇到过具体的这种情况,但目测是这个原因。我想 CSS 设置可能不会起作用,可能需要自己写一个 directive, 使用 jqlite, 自己监听 touch 事件,然后需要滚动的就滚动,和这个无关的就一概向上抛出去还给 ionic。或者搜搜有没有现成的插件或者片段。

#1 楼 @billy 听上去好复杂的样子…… 因为我用了 angular-chart.js,这是个生成图表的插件,连 ul legend 都是自动生成的,我好像还不能直接折腾, 只能通过 css 来控制。 等等看吧,如果没有简单的方法,我要不就看看 angular-chart.js 源码,加个 scroll = true 之类的玩意,要不就直接把高度变高,不滚动了,但那样很难看……

自己动手是有点复杂。或者看看有没有什么内部滚动的组件把图表包起来,不要直接动图。

#4 楼 @nightire 其实我很早看到这个文档,但觉得搞不定。 一是,我用了 ionic + angular,而每个页面,它自动生成的整个页面,就已经套了一层 scroll 功能

<ion-content class="padding scroll-content ionic-scroll  has-header">
      <div class="scroll" style="transform: translate3d(0px, 0px, 0px) scale(1);">
     </div>
</ion-content>

官方源码是

.overflow-scroll {
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;

  .scroll {
    position: static;
    height: 100%;
    -webkit-transform: translate3d(0, 0, 0);  
  }
}

所以整个页面是能滚动的。 现在我不明白的是,如果页内另一部分也要能滚动,怎样办? 官方这个例子,也是整个页面只有一个滚动,没有嵌套滚动的例子。

在 web chrome 手机调试模式下,三个手指滚动全屏,两个手指滚动 legend 是可以实现的。但既然手势要有所区分,那在手机上,我就是用一个手指拨动来实现滚动的,怎么区分?

整个图表是个 directive, 包括了图和 legend,我只是想 legend 在比较长的时候,可以滚动,左边环图是静止的,所以我也不能尝试直接在外面套个试试。 这是 directive

<canvas id="line" class="chart chart-line" chart-data="chart.current.data"
                      chart-labels="chart.current.labels" chart-legend="false" chart-series="series"
                      chart-options="chartOptions"
                      chart-click="onClick">
 </canvas>

#6 楼 @lionzixuanyuan 用归用过 但是没用这么深入- - 理论上应该是有手势冲突吧. @chairy11

我也遇到这个问题啦,现在又解决办法啦么,求解答

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册