offscreen jquery元素導致水平滾動

我有一個元素離屏，點擊屏幕上。問題在於它實際上不在屏幕外，它正在水平擴展我的文檔，所以我在頁面底部獲得了一個滾動條。offscreen jquery元素導致水平滾動

這裏的網站：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'); 
});

任何幫助，非常感謝。

來源

2013-03-01 Eric Brockman

最簡單的似乎是：

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

來源

2013-03-01 00:45:33 tim

啊，輝煌，沒有意識到我有能力定義由x和y溢出。謝謝@tim！ – 2013-03-01 00:58:30

嘗試添加這對你的CSS

body{ 
    overflow:hidden; 
    .... 
}

來源

2013-03-01 00:48:38 AlexCheuk

我不會失去垂直滾動的能力嗎？ – 2013-03-01 00:57:51

這不會解決任何問題。 – Damien 2013-03-18 10:56:59

@Damien好吧..爲什麼呢。似乎我的答案與答案相同。 – AlexCheuk 2013-03-21 16:40:03

身體CSS

，加

overflow:hidden

來源

2013-03-22 02:06:37 AndyHsiung

offscreen jquery元素導致水平滾動

回答

相關問題