我使用下面的代码来模拟带有垂直和水平滚动条的固定标题.见
example on jsFiddle.
$('#liveTable').dataTable({
'bSort': false,'destroy': true,'aoColumns': [
{ sWidth: "85px",bSearchable: false,bSortable: false },{ sWidth: "75px",{ sWidth: "80px",{ sWidth: "85px",{ sWidth: "70px",{ sWidth: "50px",bSortable: false }
],'scrollY': 200,'scrollX': true,'info': false,'paging': false
});
上面的代码在桌面上运行正常.
但是在移动设备中我滚动内容标题部分的主体时没有相应移动.移动设备中的标题移动存在一些延迟(闪烁效应).
如何修复移动设备中的标题移动问题？
解决方法
试试这个,如果它适合你.这是另一种方式,但它的工作原理.也许你只需要调整宽度或任何其他.通过jsFiddle运行它来测试它.
$.event.special.scrollstart = {
enabled: true,setup: function() {
var thisObject = this,$this = $( thisObject ),scrolling,timer;
function trigger( event,state ) {
scrolling = state;
var originalType = event.type;
event.type = scrolling ? "scrollstart" : "scrollstop";
$.event.handle.call( thisObject,event );
event.type = originalType;
}
$this.bind( scrollEvent,function( event ) {
if ( !$.event.special.scrollstart.enabled ) {
return;
}
if ( !scrolling ) {
trigger( event,true );
}
clearTimeout( timer );
timer = setTimeout(function() {
trigger( event,false );
},50 );
});
}
};
好吧,如果存在闪烁效果,请尝试这样的事情.你的卷轴没问题.这种效果太糟糕了.
document.getElementById("btn").addEventListener("click",function(){
var abc = document.getElementById("abc");
var def = document.getElementById("def");
abc.style["-webkit-transition-duration"] = "0ms";
def.style["-webkit-transition-duration"] = "0ms";
abc.style["-webkit-transform"] = "translate3d(0,0)";
def.style["-webkit-transform"] = "translate3d(100%,0)";
setTimeout(function(){
abc.style["-webkit-transition-duration"] = "1s";
def.style["-webkit-transition-duration"] = "1s";
abc.style["-webkit-transform"] = "translate3d(-100%,0)";
def.style["-webkit-transform"] = "translate3d(0,0)";
},);
});
