在Ionic中，如何在向左滑动时禁用垂直滚动？
在Ionic中，如何在向左滑动时禁用垂直滚动？
提问于 2016-01-17 21:05:42
我正在制作一个Ionic移动应用程序，它的主要视图是一个垂直的卡片列表。我希望每一张卡都是“可刷的”，就像谷歌现在的卡一样。
我开始实施这一点：
$scope.onDrag = function(event, card){
$scope.draggedStyle = {
"left": (event.gesture.deltaX) + "px",
"-webkit-transform": "translateZ(0)"
};
}问题是用户可以在刷卡时垂直滚动。这是滞后的，这不是我所期望的行为。
是否只有当用户刷卡时才禁用垂直滚动？
编辑我使用本机滚动，而不是JS滚动。
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-01-22 19:32:15
可以使用touchmove事件禁用本机滚动。我以海狸的代码页为参考，添加了一个touchmove事件，该事件检查保存在本地存储中的滚动对象，并在设置为false时禁用滚动。它正在工作，但在本例中也关闭了离子选项按钮。我确信，您可以尝试使用其他元素并将其计算出来。
$window.localStorage["Scroll"] = JSON.stringify(true);
angular.element($window).bind('touchmove', function(e) {
var scroll = JSON.parse($window.localStorage["Scroll"]);
if(!scroll)
{
e.preventDefault();
}
});
$scope.disableVerticalScrolling = function() {
console.log("disableVerticalScrolling");
$ionicScrollDelegate.getScrollView().options.scrollingY = false;
$window.localStorage["Scroll"] = JSON.stringify(false);
}
$scope.enableVerticalScrolling = function() {
console.log("enableVerticalScrolling");
$ionicScrollDelegate.getScrollView().options.scrollingY = true;
$window.localStorage["Scroll"] = JSON.stringify(true);
}下面是示例garapati/pen/jWZMbL?编者=0010
您可以在下面的页面上阅读更多的touchmove和本机滚动信息。
https://github.com/phonegap/phonegap/wiki/Prevent-Scrolling
http://blog.ionic.io/native-scrolling-in-ionic-a-tale-in-rhyme/
Stack Overflow用户
发布于 2016-01-18 17:36:38
也许您可以通过这个基于CSS的示例来尝试灵感：
.no-scroll{
pointer-events: none;
}例如，您可以在向左滑动操作期间添加no-scroll类(使用ngClass)。
Stack Overflow用户
发布于 2016-01-21 14:10:03
尝试使用freezeScroll。请参阅如何禁用内容滚动？和如何防止左/右滑动垂直卷轴
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34843680
复制相关文章
相似问题
腾讯云开发者
