如何删除使用变换比例显示的滚动条？

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>

如何删除使用变换比例显示的滚动条？

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

html

javascript

css

scale

css-transforms