Question

我有一个带有angularjs和bootstrap的项目，我试图复制iOS的navigationController。

问题在于速度。在进行视图之间的转换时，似乎最大的问题之一是向上/向下滚动。它感觉不对。

我的问题是：如何在移动Safari iOS中提高向上/向下和向左/向右滚动的速度？我知道它是可行的（离子是一个很好的例子，但我们不能使用它们，因为它们只是移动的。）

这是我目前的代码：

  /* View animations */
  .view-animate-container {
    position: relative;
    width: 100%;
  }

  .view-animate {
    -webkit-backface-visibility: hidden;
  }

  .view-animate.ng-leave {
    z-index: 1054;
  }
  .view-animate.ng-enter {
    z-index: 1053;
  }

  .view-animate.ng-enter, .view-animate.ng-leave {
    -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s;
    transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s;

    position: absolute;
    width: 100%;
    display: block;
  }

  .rtl .view-animate.ng-enter {
    -webkit-transform: translate3d(100%, 0, 0);
    -webkit-transition-delay: 0.1s;
    opacity: 0;
  }
  .rtl .view-animate.ng-enter.ng-enter-active {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  .rtl .view-animate.ng-leave.ng-leave-active {
    -webkit-transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }
  .ltr .view-animate.ng-enter {
    -webkit-transform: translate3d(-100%, 0, 0);
    -webkit-transition-delay: 0.1s;
    opacity: 0;
  }
  .ltr .view-animate.ng-enter.ng-enter-active {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  .ltr .view-animate.ng-leave.ng-leave-active {
    -webkit-transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
  /* End of View animations */



  <div class='view-animate-container' ng-class='direction'>
    <div id='mApp' ng-view class='view-animate' autoscroll='false'></div>
  </div>



  // Random scrollHeight fix. Moves the scroll position up during the transition.
  function scrollToTop() {
    var ua = $('html')[0].className;
    var diff = document.body.scrollHeight;
    var delay = ((ua.indexOf('ua-mobile') > -1 && ua.indexOf('ua-webkit') > -1) ? (320 + diff/17) : 50);
    window.setTimeout(function() {
      window.scrollTo(0, 0);
    }, delay)
  }

Answer 1

我会尝试两件事：

在溢出的div（即已设置overflow属性的div）上，将overflow属性设置为“滚动”，而不是使用＆＃39; auto＆＃39;。
然后，使用$scope.$evalAsync，它将在摘要完成后立即执行（但在实际渲染之前）。

如果它仍然不起作用，你可以结合使用$ evalAsync和setTimeout（或$ timeout） - 在$ evalAsync中设置超时。

移动野生动物园中更好/更快的滚动？

1 个答案: