JS Auto scrolling

For some special templates, many charts, tables, etc. may be placed on one page in order to display more abundantly and comprehensively.

But there will be incomplete display of content due to excessive content exceeding the size of the browser window. So we need to use the JS scrolling effect to solve this problem.

2.1 Example 1: Automatic scrolling of general reports

Click menu template>template Web attributes>pagination preview , select "individually set for this template", and add a "loading end" event, as shown below:

The JavaScript code is as follows:

Note: When using the custom scroll bar plugin (version 1.2) under cpt, the content-container in the code needs to be replaced by scrollDiv, and the reportContent in the code needs to be replaced by scrollDiv under the dashboard report block.

setTimeout(function(){
//The mouse click ends
$('.content-container').click(function(){
if(timer){ 
clearInterval(timer); 
}
})
var h=-1;
var timer = setInterval(function(){
//Get the current scroll bar height
var current = $('.content-container')[0].scrollTop;
if(current==h){ 
//Scroll to the bottom, refresh the screen, and return to the top 
clearInterval(timer); 
window.location.reload(); 
contentPane.$contentPane.scrollTop(0); 
}
else
{ 
//Scroll at 25ms/3.5px speed 
h=current; 
$('.content-container')[0].scrollTop=h+3.5;
}
},25);
},2000)

2.2 Example 2: Automatic scrolling under freeze setting

To add a loading event, click template>template Web attributes>pagination preview , select "individually set for this template", and add a loading end event, as shown in the following figure: 

JavaScript:

setTimeout(function(){
$("div[widgetname=REPORT0]").find("#frozen-north")[0].style.overflow="hidden";
$("div[widgetname=REPORT0]").find("#frozen-center")[0].style.overflow="hidden";
},100);
//Hide the scroll bar of report block report0
window.flag=true;
setTimeout(function(){   
$("#frozen-center").mouseover(function()  
{  
  window.flag=false;  
  })
  //Mouse hover, scroll stop
$("#frozen-center").mouseleave(function()  
{  
  window.flag=true;  
  })  
  //Mouse left, continue to scroll
var old=-1;   
var interval=setInterval(function()  
{
if(window.flag){
   currentpos=$("#frozen-center")[0].scrollTop;  
   if (currentpos==old){
   $("#frozen-center")[0].scrollTop=0;
     }  
   else {  
      old=currentpos;  
      $("#frozen-center")[0].scrollTop=currentpos+1.5;  
        }  
      }
    },25);
    //Scroll 3.5PX at a time of 25ms
},1000)

3.1 Example 1:

Save the template, click the pagination preview, and the automatic scrolling effect as shown below will appear.

Note: Left click on the window to stop scrolling.

3.2 Example 2:

Save the template, click the pagination preview, the following automatic scrolling effect will appear.

Hover the mouse to stop scrolling; move the mouse away to continue scrolling.

Note:

• You can also use the mouse wheel.

• Left click on the window will not stop scrolling. 

4.1 Example 1:

1.cpt

4.2 Example 2:

2.cpt