FineReport中如何實現自動滾屏效果

對於一些特殊的模板，可能爲了展現的更加豐富、全面會在一個頁面放置不少圖表。表格等內容。因爲內容過多，超出了瀏覽器窗口的大小致使內容展現不全的狀況。這樣咱們就須要用到JS滾屏效果來解決，這裏主要介紹在FineReport中的具體制做方法。 

 

 

添加加載結束事件

點擊菜單模板>模板web屬性>分頁預覽設置，選擇「爲該模板單獨設置」，添加一個「加載結束」後事件，以下圖所示：

 

 

JS代碼以下：

//從頁面加載結束後延遲2000MS執行事件（滾動）
setTimeout(function(){
//當鼠標點擊時
$(".content-container").click(function()
{
//若是頁面正在執行事件（滾動）
  if(interval)
  {
//取消事件（滾動）
  clearInterval(interval);
  }
})
var old=-1;
//按照指定週期不斷的調用滾動事件
var interval=setInterval(function()
{ 
currentpos=$(".content-container")[0].scrollTop;
if (currentpos==old){
//取消事件（滾動）
clearInterval(interval);
//從新加載頁面
window.location.reload();
}
else
{
old=currentpos;
//以25MS的速度每次滾動3.5PX
$(".content-container")[0].scrollTop=currentpos+3.5;
}
}
,25);
},2000)

保存與預覽

保存模板，點擊分頁預覽，就會出現上面的自動滾動效果。若是想要中止滾動的話，用鼠標左鍵點擊一下窗口便可。