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

body cssに、追加します

overflow:hidden