Here is the situation we want to hide scroll bar. We have huge content. But we want to still scroll. We can accomplish this with different tactics.

By using Css

We can use Css techniques in order to hide and do not show the scrollbar in a browser. This is supported by all major browsers like Chrome, Firefox, Internet Explorer and Opera.

We will set the parent and child class height and width to the %100 . We will also set some properties like overflow to hidden, overdlow-yto scroll etc.

#parent{
 height: 100%;
 width: 100%;
 overflow: hidden;
}

#child{
 width: 100%;
 height: 100%;
 overflow-y: scroll;
 padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
}

By Using Javascript

We can also use JavaScript for hiding scrollbars in popular browsers like Chrome, Firefox, Opera, Internet Explorer etc. We will use parent and child objects to set their width and height to same values.

var parent = document.getElementById('container1');
var child = document.getElementById('container2');
child.style.paddingRight = child.offsetWidth - child.clientWidth + "px";

Hiding Scroll Bar for Internet Explorer, Chrome, Firefox Infografic