javascript - 为什么页面在使用 scrollBy() 时会振动？

Question

我正在 angularjs 中创建一个指令以实现平滑滚动。但是我遇到了一些奇怪的问题，每当我单击任何菜单项时，页面都会开始振动并且它也不会上升。它只适用于向下.. :p :).. 这很有趣，我无法解决这个问题。这是我的代码……
FIDDLE 链接 https://jsfiddle.net/a6at8js6/1/

HTML

<div ng-app="mainApp" ng-controller="mainCtrl">
<ul class="left">
  <li ng-repeat="menu in menus"  class="list-group-item" scroll srcelem="head{{$index+1}}"><a href="">{{menu}}</a></li>
</ul>

<ul class="right">
  <li ng-repeat="p in para" id="head{{$index+1}}">{{p}}</li>
</ul>
</div>

CSS

.left{
  float:left;
  position:fixed;
}
.right{
  float:right;
  width:500px;
}

.right li{
  height:500px;
}

JS

var app = angular.module("mainApp",  []);
app.directive('scroll', function(){
    return{
        restrict : 'A',
        link: function(scope, element, attr){
            element.bind("click", function(e){



                var target_elem = document.getElementById(attr.srcelem);



                var divHeight = function(ele) {
                    var x = 0;
                    while (ele) {
                        x += ele.offsetTop;
                        ele = ele.offsetParent;
                    }
                    return x;
                }


                var timerID = setInterval(function() {
                    if(window.pageYOffset < divHeight(target_elem)){
                        window.scrollBy(0, 5);

                    }else if(window.pageYOffset > divHeight(target_elem)){
                        window.scrollBy(0, -5);
                    }
                    else if(window.pageYOffset === divHeight(target_elem)){
                        clearInterval(timerID);
                    }
                }, 1);


            });
        }
    };
});


app.controller("mainCtrl",  function($scope){
    $scope.menus = [1 , 2  ,3,  4,  5];
    $scope.para = ["1 unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries but also the leap into electronic typesettingremaining essentially unchanged. It was popsdgsised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",  "2 unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries  but also the leap into electronic typesettingremaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages and more recently with desktop publishingsoftware like Aldussdgser including versions of Lorem Ipsum.",  "3 unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries  but also the leap into electronic typesettingremaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages and more recently with desktop publishingsoftware like Aldus PageMaker insdgsversions of Lorem Ipsum.",  "4 unknown printer took a galley of type and scrambled it to msdfbtype specimen book. It has survived not only five centuries  but also the leap into electronic typesetting emaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages and more recently with desktop publishing software like Aldus PageMaker including versions of bm Ipsum.",  "5 unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries  but also the leap into electronic typesetting remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages and more recently with desktop publishing software like Aldus PageMaker including verssdgrem Ipsum."];
});

Answer 1

你的间隔条件太严格了，它在 +5 和 -5 左右，如果你的偏移量不像 10 或 15 那样圆，如果是 13 它将陷入无限循环。

修改您的 === 条件以接受更多的条件，例如 +3 和 -3，不仅是完全相同的偏移量，并将其作为第一个条件。