保持邊欄，但刪除滾動JavaScript？

Question

我試圖複製Facebook顯示的圖片在lightbox類型格式中的方式。我無法複製的唯一事情是他們實現留下側邊欄裏面沒有實際滾動條的方式......

我想任何人都可以看到，這是去給Facebook拉起圖片，讓燈箱的最佳方式效果在行動中。注意側邊欄。任何人有任何建議或方法來實現這一目標？有沒有辦法定位滾動條上的特定節點？

謝謝。 jQuery是這個項目的首選庫。

Answer 1

這主要是CSS說實話。

看一看這個小提琴：http://jsfiddle.net/ktd29/11/

我創建了世界上在模仿什麼的Facebook做最壞的收藏夾。紅色正方形代表圖片，黑色代表半透明覆蓋。

您會注意到主體是可滾動的，直到您單擊鏈接時滾動條被禁用。

半透明疊加絕對定位div用100％的寬度和高度：

div { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background: rgba(0,0,0,0.7); 
    overflow-y: scroll; 
    display: none; 
} 

的最後一件事需要注意這個div是overflow-y設置爲scroll這將意味着有一個滾動條始終無論它是否實際可滾動或不滾動。

文檔的高度設置爲非常大，這樣當您不查看燈箱時，頁面可以滾動。這裏是調用收藏夾代碼：

jQuery(document).ready(function($) { 
    $('a').click(function(){ 
     $('div').addClass('shown'); 
     $('html').addClass('noScroll'); 
    }); 
}); 

這是你所期望的東西。我正在應用一個顯示的類，在本例中它只是display: block;，但請注意應用於HTML的類noScroll。這將overflow-y: hidden;應用於移除原始滾動條的html。這停止了​​兩個滾動條（一個用於html，一個用於覆蓋div）。

讓我知道你是否需要我澄清任何事情。