If your site have a lot of data to display on a page, it will make the page laggy. With this tutorial, you can limit the data on the main page and load new data when user reach the bottom of the page. This makes it easy to show huge data in a single page. 
Posts marked with "Scroll" in tags
Setting Iframe height to its content height using Javascript
While loading an iframe on page the most difficult thing is to set it’s height to the height of the content of the iframe. I looked around the web and got the code. This is pure Javascript, doesn’t contain jQuery or any other libraries. Set these functions :
function getDocHeight(doc) {
... [READ MORE]
doc = doc || document;
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function setIframeHeight(id) {
var ifrm = id;
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
ifrm.style.visibility = ‘hidden’;
ifrm.style.height = "10px"; // reset to minimal height in case going from longer to shorter doc
// some IE versions need a bit added or scrollbar appears
ifrm.style.height = getDocHeight( doc ) + 4 + "px";
ifrm.style.visibility = ‘visible’;
}
Scroll Horizontally Without Scrollbar Using jQuery
To scroll horizontally with CSS is very annoying, because the whole page will move vertically and sometimes the Y axis will scroll. So I decided to use jQuery and it’s very simple. Only 237 characters which is only 2 lines. Here is the **jQuery **code with the div id #scrollho.
jQuery
$('#scrollho').on('mousewheel',function(e){
e.preventDefault();
scrollLeft=$('#scrollho').scrollLeft();
if(e.originalEvent.wheelDeltaY.toString().slice(0,1)=='-'){
$('#scrollho').scrollLeft(scrollLeft+100);
}else{
$('#scrollho').scrollLeft(scrollLeft-100);
}
});CSS
#scrollho{
overflow:hidden;
}Explanation
The #scrollho div’s scrollbars are hidden with CSS. When a mousewheel event occurs on #scrollho the default event is neutralized and the div is scrolled horizontally to the direction of the mousewheel using e.originalEvent.wheelDeltaY. **e.originalEvent.wheelDeltaY **is converted into string as to do the slice function to check whether the number is negative or not.
... [READ MORE]