时间戳

首页 > 解决方案 > 离子溢出滚动干扰 $ionScrollDelegate

javascript - 离子溢出滚动干扰 $ionScrollDelegate

问题描述

在模板页面上有一个按钮，用于激活扫描二维码的相机。为了确保摄像头始终在视图中，我将视图跳转到页面顶部并禁用页面上的滚动。不这样做经常会导致视图在屏幕外打开，并且用户通常认为应用程序已损坏，因为他们看到的只是一个白页。所以在激活相机视图的功能中，我添加：

    $ionicScrollDelegate.scrollTop() ;
    $ionicScrollDelegate.freezeAllScrolls(true) ;

当相机视图关闭时，我再次重新激活滚动：

    $ionicScrollDelegate.freezeAllScrolls(true) ;

这一切都有效。

同样在同一页面上，我有一个街道地址，如果用户点击/点击，它将跳转到页面下方的静态地图。我正在使用以下方法滚动到同一页面上的特定位置：

  $scope.scrollTo = function(id){
     $location.hash(id);
     $ionicScrollDelegate.anchorScroll(true);
  }

它可以工作，但是，一旦滚动到该位置，页面将不会向上滚动。它卡在那个跳跃点。要解决这个问题，我必须添加overflow-scroll='true'到我的<ion-content>标签中。这允许用户向上滚动超过跳转点。

这行得通。

但是....添加overflow-scroll="true"然后覆盖相机的代码 - 启用溢出滚动然后freezeAllScrolls(true)不再工作，用户可能会意外地将视图滚动到页面之外。scrollToTop 仍然有效（这很好），但此时仍然启用页面滚动（这很糟糕）。

我该如何解决这个问题？

标签： javascriptangularjsionic-frameworkscrolloverflow

解决方案

推荐阅读