Javascript 为什么使用scrollBy（）时页面会振动？

我正在用angularjs创建一个用于平滑滚动的指令。。但我面临着一些奇怪的问题，每当我点击任何菜单项时，页面就会开始振动，而且不会上升。它只适用于以下情况：p:）。。。。这很有趣，我无法解决这个问题。 这是我的密码
小提琴链接

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>

JS

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

.right li{
  height:500px;
}

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."];
});

var-app=angular.module（“mainApp”，[]）；
app.directive（'scroll'，function（）{
返回{
限制：“A”，
链接：功能（范围、元素、属性）{
元素绑定（“单击”，函数（e）{
var target_elem=document.getElementById（attr.srcelem）；
var divHeight=函数（ele）{
var x=0；
while（ele）{
x+=元素偏移量；
ele=ele.offsetParent；
}
返回x；
}
var timerID=setInterval（函数（）{
if（window.pageYOffsetdivHeight（目标元素））{
滚动窗口（0，-5）；
}
else if（window.pageYOffset==divHeight（target_elem））{
清除间隔（timerID）；
}
}, 1);
});
}
};
});
应用程序控制器（“mainCtrl”，函数（$scope）{
$scope.menus=[1,2,3,4,5]；
$scope.para=["1不知名的印刷商拿起一个铅字厨房，争先恐后地制作了一本铅字样本书。它不仅存活了五个世纪，而且在电子排版的飞跃中基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset纸张的发行而流行，最近随着桌面出版的兴起而流行像Aldus PageMaker这样的软件，包括Lorem Ipsum的版本。”2不知名的印刷商拿起一个印刷工具，争先恐后地把它做成一本活字样本书。它不仅存活了五个世纪，而且在电子排版的飞跃中基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset纸的发行而流行，最近又随着桌面出版而流行包括Lorem Ipsum版本的Aldusdgser等ftware。”3不知名的印刷商拿了一个铅字大船，争先恐后地制作了一本铅字样本书。它不仅存活了五个世纪，而且在电子排版的飞跃中基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset纸的发行而流行，最近又随着桌面出版而流行如Aldus PageMaker insdgsversions of Lorem Ipsum之类的软件。”4不知名的印刷商拿起一个铅字大船，把它拼成msdfbtype样书。它不仅存活了五个世纪，而且在电子排版的飞跃中基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset纸张的发行以及最近的桌面出版软件的发行而流行类似于Aldus PageMaker的软件，包括bm Ipsum的版本。”5不知名的印刷商拿起一个铅字厨房，争先恐后地制作了一本铅字样本书。这本书不仅保存了五个世纪，而且在电子排版的飞跃中基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset纸张的发行而流行，最近又随着桌面出版而流行Aldus PageMaker等软件，包括verssdgrem Ipsum。”]；
});

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

---

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

您正在跳转的间隔不允许您的

窗口。pageYOffset===divHeight（target\elem）

条件的计算结果为真。请更改条件中的步长或步长系数

---

如果您绝对必须使用相等，请尝试添加一个误差增量。我还建议您使用

setTimeout

而不是

setInterval

它被困在循环中。事实就是如此。