jquery - How to remove scroll bar using overflow CSS HTML (Possible Positioning Conflict)

Question

I have tried everything to try and remove this bottom scroll bar but cant seem to figure it out. I'm not sure if it is something to do with the positioning.

The image (banner) is supposed to be 2000px(width) by 400px(height) but I would like it to not effect the page size by adding the scroll bar.

LIVE DEMO

CSS

#banner {
    margin:0 auto;
    background: #EAEAEA;
    position: relative;
    width:1000px;
    height:400px;
    display:block;
    float:none;
    top:160px;
}
#slideshow { 
    width: 1000px; 
    display:block;
    text-align:center; 
    position:absolute;
    left:-50%;
}
#slideshow > div { 
    position: absolute; 

}
.images {
    overflow-y:visible;
    width:1000px;
    height:400px;   
}

HTML

<div id="banner">
    <div id="slideshow">
        <div><a class="images" href="#"><img src="AG/images/bulbs.png"></a></div>
        <div><a class="images" href="#"><img src="AG/images/cables.png"></a></div>
    </div>
</div>  <!--END banner -->

Thank you in advance

UPDATE

Is there a way to only add overflow to the banner rather than the whole page? For example the same as EXAMPLE

Answer 1

只需添加：

body {
    overflow-x: hidden;
}

Answer 2

您可以在横幅周围包裹另一个 div。

<div id="bannerWrapper">
    <div id="banner">
         <!--the rest of your code-->
    </div>
</div>

在 CSS 中：

#bannerWrapper{
    width:100%;
    overflow-x:hidden;
}

横幅将在较小的屏幕上显示较少，而在较大的屏幕上显示为全宽。希望它有所帮助