對于一些特殊的模板，可能為了展示的更加豐富、全面會在一個頁面放置很多圖表。表格等內容。由于內容過多，超出了瀏覽器窗口的大小導致內容展示不全的情況。這樣我們就需要用到JS滾屏效果來解決，這里主要介紹在FineReport中的具體制作方法。?

?

?

添加加載結束事件

點擊菜單模板>模板web屬性>分頁預覽設置，選擇“為該模板單獨設置”，添加一個“加載結束”后事件，如下圖所示：

?

?

JS代碼如下：

1

<span style="font-family:'微軟雅黑', 'Microsoft YaHei';font-size:14px;">//從頁面加載結束后延遲2000MS執行事件（滾動）<br>setTimeout(function(){<br>//當鼠標點擊時<br>$(".content-container").click(function()<br>{<br>//如果頁面正在執行事件（滾動）<br> ?if(interval)<br> ?{<br>//取消事件（滾動）<br> ?clearInterval(interval);<br> ?}<br>})<br>var old=-1;<br>//按照指定周期不斷的調用滾動事件<br>var interval=setInterval(function()<br>{ <br>currentpos=$(".content-container")[0].scrollTop;<br>if (currentpos==old){<br>//取消事件（滾動）<br>clearInterval(interval);<br>//重新加載頁面<br>window.location.reload();<br>}<br>else<br>{<br>old=currentpos;<br>//以25MS的速度每次滾動3.5PX<br>$(".content-container")[0].scrollTop=currentpos+3.5;<br>}<br>}<br>,25);<br>},2000)<br></span>

保存與預覽

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

本文轉自 雄霸天下啦 51CTO博客，原文鏈接：http://blog.51cto.com/10549520/1903553，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的FineReport中如何实现自动滚屏效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。