我在表元素中有一个允许水平滚动的指令。我有一个固定的标题,通过将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);
});
}
}
});