无法在 Ionic 1.3.0 iOS App 中水平滚动答案

【问题标题】：Can't horizontally scroll in Ionic 1.3.0 iOS App无法在 Ionic 1.3.0 iOS App 中水平滚动
【发布时间】：2017-12-02 08:45:43
【问题描述】：

我的 Cordova/Ionic (v1.3.0) 应用程序主要包含一个为复杂表单构建 HTML 的 JQuery 应用程序。同一个 JQuery App 用于为 Web 浏览器构建复杂的表单，只有少数地方插入了特定于移动设备的代码。

我现在尝试在垂直滚动表单中设置一个水平滚动的表格部分（表单本身不会水平滚动，只是表格部分）。水平滚动部分适用于计算机上的 Safari/Chrome/Firefox、iOS 上的 Safari 以及我们的 Cordova/Ionic 应用程序的 Android 版本，但它不能在 iOS 应用程序中水平滚动。

我根据这些 SO 问题和文档 (q1,q2,q3,q4) 尝试了各种修复，其中我将其从 <div/> 更改为 <ion-content/> 并添加了 overflow-scroll="true" direction="xy" delegate-handle="tableGroup"属性并在加载 JQuery 应用程序后调用 $ionicScrollDelegate.$getByHandle('tableGroup').resize() 但没有任何效果。我还尝试使用基于this question 的 TinyScrollbar，但加载不正确。所以我尝试了很多方向，但没有到达任何地方。有什么建议吗？

【问题讨论】：

标签： ios cordova ionic-framework horizontal-scrolling

【解决方案1】：

我实际上是自己想出来的。我在 Ionic 页面上的容器中放置了几个简单滚动元素的变体，<ion-scroll/> 起作用了。然后我尝试将它放入带有代理句柄sectionScroll 的JQuery 应用程序中，并在JQuery 应用程序加载后调用$ionicScrollDelegate.$getByHandle('sectionScroll').resize();，但收到控制台警告说它找不到任何名为sectionScroll 的东西，我应该把它放进去$timeout()。我试过了，但它仍然没有用。然后我意识到，由于<ion-scroll/> 是一个 Angular 指令，它是作为使用 JQuery 插入到 Ionic 应用程序中的长模板字符串的一部分创建的，它需要由 Angular 编译才能被识别如下：

let toCompile = angular.element('#formContent');
let linkFn = $compile(toCompile);
linkFn($scope);
$ionicScrollDelegate.$getByHandle('sectionScroll').resize();

【讨论】：