0

我在一个页面上有一个过滤项目列表，该列表链接到另一个页面中的完整项目列表，我想导航到该页面并滚动到我在过滤列表中选择的项目。

我尝试使用 2 种不同的方法——$anchorScroll它们有效但没有动画属性。因此，下一个视图只会出现“预滚动”项，然后“弹性到该位置”。然后我尝试实现这样的服务：

.factory('ScrollService',function(){
var service = {};

service.scrollTo = function(eID) {

    // This scrolling function 
    // is from http://www.itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript

    var startY = currentYPosition();
    var stopY = elmYPosition(eID);
    var distance = stopY > startY ? stopY - startY : startY - stopY;
    if (distance < 100) {
        scrollTo(0, stopY); return;
    }
    var speed = Math.round(distance / 10);
    if (speed >= 20) speed = 20;
    var step = Math.round(distance / 25);
    var leapY = stopY > startY ? startY + step : startY - step;
    var timer = 0;
    if (stopY > startY) {
        for ( var i=startY; i<stopY; i+=step ) {
            setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
            leapY += step; if (leapY > stopY) leapY = stopY; timer++;
        } return;
    }
    for ( var i=startY; i>stopY; i-=step ) {
        setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
        leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
    }

    function currentYPosition() {
        // Firefox, Chrome, Opera, Safari
        if (self.pageYOffset) return self.pageYOffset;
        // Internet Explorer 6 - standards mode
        if (document.documentElement && document.documentElement.scrollTop)
            return document.documentElement.scrollTop;
        // Internet Explorer 6, 7 and 8
        if (document.body.scrollTop) return document.body.scrollTop;
        return 0;
    }

    function elmYPosition(eID) {
        var elm = document.getElementById(eID);
        var y = elm.offsetTop;
        var node = elm;
        while (node.offsetParent && node.offsetParent != document.body) {
            node = node.offsetParent;
            y += node.offsetTop;
        } return y;
    }

};

return service;
});

这不起作用，因为出于某种原因我需要调用它两次并且也没有动画。

控制器调用：

var gotoItem = function (eID){
  // set the location.hash to the id of
  // the element you wish to scroll to.
  $location.hash(eID);

  // call $anchorScroll()
  ScrollService.scrollTo(eID);

};
  $scope.$on('$ionicView.afterEnter', function(){
   $timeout(function(){
      gotoItem('-KR9Z3yDVb6TVEdk38z6'); //tried hardcoding the element...fail
    }, 500); ///trying to hold off until visible...fail
  });

URL 构造如下： <baseURL>/<ItemPage>#<ItemID>其中<ItemID>是项目在完整列表中的 id。

$location.hash()获得正确的“id” - 实际上，我如何为类似于此站点的滚动设置动画，并最终在滚动后执行类似的 CSS 突出显示？没有新的滚动到位置是粘性的。

感谢您的时间。

4

0 回答 0