javascript - 屏幕外 jquery 元素导致水平滚动

Question

我有一个屏幕外的元素，点击时会进入屏幕。问题不是它实际上不在屏幕上，而是水平扩展我的文档，所以我在页面底部有一个滚动条。

这是网站：http ://ericbrockmanwebsites.com/dev4/

这是html：

<div id="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div id="dashboard">
                <nav id="access">
                    <div class="open"></div><?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
                </nav>
            </div> <!-- dashboard -->
        </div> <!-- span12 -->
    </div> <!-- row-fluid -->

这是CSS：

#container-fluid {
  width:1280px;
}

.row-fluid .span12 {
  width: 100%;
  *width: 99.94680851063829%;
}

#dashboard {
  font-size:30px;
  float:left;
  position: absolute;
  right: -659px;
  z-index: 100;
}

#access {
  display: block;
  float: right;
  margin: 10px auto 0;
  width:730px;
}

.open {
  background: #cabd32 url(images/open.png) top left no-repeat;
  background-position:center;
  float:left;
  padding: 32px 35px 33px;
}

.close {
  background: #cabd32 url(images/close.png) top left no-repeat;
  background-position:center;
  float:left;
  padding: 32px 35px 33px;
}

这是脚本：（由@AlexCheuk 编写）

$('.open').bind('click',function(){ 
    $('#dashboard').stop().animate(
    {
        right: $(this).hasClass('close') ? '-659px' : '0'
    });
    $(this).toggleClass('close');
});

任何帮助是极大的赞赏。

Answer 1

最简单的似乎是：

添加body {overflow:hidden;}或使用overflow-x

Answer 2

尝试将此添加到您的 CSS

body{
    overflow:hidden;
    ....
}

Answer 3

在正文 css 中，添加

overflow:hidden