변형 스케일을 사용하여 표시된 스크롤바를 제거하는 방법은 무엇입니까?

Question

이미지 슬라이더를 개발하려고합니다. 다음 이미지 인계가 발생할 때까지 이미지를 확대하고 싶습니다. 현재 변환 스케일 속성을 사용하고 있습니다. 너비가 오버플로되어 스크롤 막대가 표시됩니다. 이 스크롤 바를 어떻게 제거 할 수 있습니까?

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

모든 스크롤바를 제거하려면이 추가가 :

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