例如Demo:IOS平台年度數據報表。
展示內容豐富,一個頁面中存在多個圖表、內容,超出了瀏覽器窗口的大小導致內容展示不全。
為了能夠預覽這個報表的全部內容,可以使用JS滾屏效果來實現。
操作步驟:
點擊菜單模板→模板web屬性→分頁預覽設置→為改模板單獨設置→添加“加載結束”事件
JS腳本代碼:
1 setTimeout(function(){ 2 //鼠標點擊結束 3 $('.content-container').click(function(){ 4 if(timer){ 5 clearInterval(timer); 6 } 7 }) 8 var h=-1; 9 var timer = setInterval(function(){ 10 //獲取當前滾動條高度 11 var current = $('.content-container')[0].scrollTop; 12 if(current==h){ 13 //滾動到底端,刷新屏幕,並返回頂端 14 clearInterval(timer); 15 window.location.reload(); 16 contentPane.$contentPane.scrollTop(0); 17 } 18 else 19 { 20 //以25ms/3.5px的速度滾動 21 h=current; 22 $('.content-container')[0].scrollTop=h+3.5; 23 } 24 },25); 25 },2000)
保存模板,點擊分頁預覽就會實現自動滾動效果。如果想要停止滾動,鼠標左鍵點擊頁面即可。