兩個滾動條的問題？

在這個post之後，我做了一個測試，但是我仍然遇到了一些問題 - 當你點擊顯示圖像時，頁面有兩個滾動條。兩個滾動條的問題？

當圖像顯示時，我不需要背景滾動條，我只需要圖像容器上的滾動條。

如何隱藏背景滾動條而不使頁面跳動？

的CSS，

#container-image { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    overflow-x: auto; 
    overflow-y: scroll; 
    z-index:100; 
}

的HTML，

<p>Please scroll down until you see the click button</p> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<a href="#" class="get-photo">click</a> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 

<div id="container-image" style="display:none"> 
    <ul id="items-image"> 
     <li><img src="winnie-the-pooh-2011-4.jpg"/></li> 
    </ul> 
</div>

jquery的，

$(document).ready(function(){ 
     $('.get-photo').click(function(){ 

      var object = $(this); 
      var object_path = object.attr('href'); 
      var scroll_top = $(window).scrollTop(); 
      //alert(object_path); 
      $('#container-image').show(); 
      return false; 
     }); 

    });

下面是測試page。

編輯：

只是設法隱藏body滾動條，它適用於所有的瀏覽器IE8接受 - 我怎麼能修復IE？

$(document).ready(function(){ 
     $('.get-photo').click(function(){ 
      $('body').css('overflow', 'hidden'); 
      var object = $(this); 
      var object_path = object.attr('href'); 
      var scroll_top = $(window).scrollTop(); 
      var height_document = $(document).height(); 
      //alert(object_path); 

      $('#background-photo').css({ 

       height:height_document + 'px', 
       display:'block' 

      }); 

      $('#container-image').show(); 
      return false; 
     }); 

     $('#items-image img').click(function(){ 

      var object = $(this); 
      $('body').css('overflow', 'auto'); 
      $('#container-image').hide(); 
      $('#background-photo').hide(); 
      return false; 
     }); 

    });

編輯：

固定IE8：

$('body,html').css('overflow', 'hidden');

來源

2011-09-04 laukok

你的樣品頁有[193個驗證錯誤（HTTP：//驗證。 w3.org/check?uri=http%3A%2F%2Flauthiamkok.net%2Fdump%2Fposition.fixed%2F&charset=%28detect+automatically%29&doctype=Inline&group=0）。注意這些以及您跨瀏覽器一致性增加的機會。也考慮使用利潤率或其他CSS定位而不是百萬'
'。 – Sparky

在身上設置overflow: hidden在顯示圖像時，隱藏滾動條：

$('body').css('overflow', 'hidden');

來源

2011-09-04 13:31:33 arnaud576875

明白了！非常感謝！ – laukok

只是設法隱藏身體滾動條，它適用於所有瀏覽器接受IE8 - 我如何解決IE瀏覽器？謝謝！ – laukok

把它修好了！謝謝。 – laukok

我剛剛在Firebug中刪除了以下樣式：

overflow-x: auto; 
overflow-y: scroll;

我可以看到沒有滾動的背景。嘗試一下。

但是，在這種情況下，如果背景圖像比可見光的瀏覽器窗口更大 - 你永遠可以看到整個圖像，因爲position:fixed

來源

2011-09-04 13:32:34 Samich

謝謝。請參閱我上面的編輯。 – laukok

兩個滾動條的問題？

回答

相關問題