How to remove scrollbar which is shown on using transform scale?

Question

I am trying to develop an Image slider. I want the images to zoom in until the next image takeover occurs. I am currently using the transform scale property. It is overflowing the width and causes a scrollbar to be displayed. How can this scrollbar be removed?

HTML:

<div id="pn-head">
</div>

JS:

        var i = 1;
        function tSlide(){
            if(i<=5){
                jQuery('#pyn-head').attr('class','pn-head head-bg'+i);
            }
            i = i+1;
            if(i==6){
                i=1;
            }
        }
        tSlide();
        setInterval(tSlide , 5000);

CSS:

.pn-head{
    height: 700px;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;
    -webkit-transition: transform 2s ease-out 1s;
    -moz-transition: transform 2s ease-out 1s;
    -o-transition: transform 2s ease-out 1s;
    transition: transform 2s ease-out 1s;
}
.head-bg1{
    background: url('../img/b1.png');
    transform: scale(1.1);
}
.head-bg2{
    background: url('../img/b2.png');
    transform: scale(1.2);
}
.head-bg3{
    background: url('../img/b3.png');
    transform: scale(1.3);
}
.head-bg4{
    background: url('../img/b4.png');
    transform: scale(1.4);
}
.head-bg5{
    background: url('../img/b5.png');
    transform: scale(1.5);
}

Answer 1

Add this to remove all scrollbars:

<style type="text/css">
body {
    overflow:hidden;
}
</style>