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

offscreen jquery元素导致水平滚动

3 个答案: