Question

我在表元素中有一个允许水平滚动的指令。我有一个固定的标题，通过将scroll事件绑定到包含该指令的元素（表）来保持位置I更新：

指令的link函数更新屏幕上的标题位置，并在表格上加一个div来阻止指针事件。

很明显，这个函数会强制重复一些样式，所以我的问题是：

在angular.js世界中，什么是最好的方法。我应该使用$ animate，如果我按照我的方式设置超时，是否可以通过请求动画帧来避免扩展帧（这个例子是如何完成的？）。哪种方式最适合表现？

这是我目前的指令：

app.directive('checkScroll',  function() {
    return {
      // require: '^?listeditorController',
        link: function(scope, elem, attrs) {
            var timer = null;
            var screenBlock=  document.getElementsByClassName('blockEventsScreen')[0];
            // var lastLeft = 0;
            // requestAnimationFrame( scope.onScroll );
            elem.bind('scroll', function() {

            if(timer !== null) {
                //clear previous timer that turned off the during scroll tweaks
                clearTimeout(timer); 
                clearInterval(scope.interval);
                scope.interval = undefined;

                    //This sets the left style attribute of the table header container to the same value as the table body
                   var el=document.getElementsByClassName('fixedHeader')[0];

                   var newLeft = elem[0].getElementsByClassName('superResponsive')[0].getBoundingClientRect().left;


                screenBlock.style['transform'] = 'translateX(0px)';
                screenBlock.style['msTransform'] = 'translateX(0px)';
                screenBlock.style['MozTransform'] = 'translateX(0px)';
                screenBlock.style['WebkitTransform'] = 'translateX(0px)';
                screenBlock.style['OTransform'] = 'translateX(0px)';
                // var diff= Math.abs(newLeft - lastLeft );
                // if(diff>0){
                el.style['transform'] = 'translateX('+newLeft+'px)';
                el.style['msTransform'] = 'translateX('+newLeft+'px)';
                el.style['MozTransform'] = 'translateX('+newLeft+'px)';
                el.style['WebkitTransform'] = 'translateX('+newLeft+'px)';
                el.style['OTransform'] = 'translateX('+newLeft+'px)';
                // lastLeft=newLeft;        
                // scope.$apply(function(){
                //   $scope.headerLeft=newLeft+'px';
                // });
                    // requestAnimationFrame( scope.onScroll );
               // }
                }
                timer = setTimeout(function() {
                      //remove screen  of table to enable pointer-events
                      screenBlock.style['transform'] = 'translateX(-10000px)';
                      screenBlock.style['msTransform'] = 'translateX(-10000px)';
                      screenBlock.style['MozTransform'] = 'translateX(-10000px)';
                      screenBlock.style['WebkitTransform'] = 'translateX(-10000px)';
                      screenBlock.style['OTransform'] = 'translateX(-10000px)';
                      //restart scaleheader after scrolling
                      scope.interval = setInterval( function(){scope.scaleHeader();}, 200);

                }, 200);




            });
        }
    }
});

使用requestAnimationFrame || $ animate ||指令|| $超时？

0 个答案: