窗口滾動條在窗口的大小調整上消失

我爲電子商務網站的後臺製作了一張表。表格內容（tbody）具有固定高度，並且可以通過右側的滾動條滾動，如圖所示：http://img690.imageshack.us/img690/6483/screenshot20110917at819.png 窗口滾動條在窗口的大小調整上消失

問題是，如果我調整瀏覽器窗口的大小，此表滾動條將消失： http://img26.imageshack.us/img26/4919/screenshot20110917at820.png

我知道這應該是正常行爲，但我的客戶堅持要保留表格滾動條，即使在調整窗口大小時也是如此。有沒有一種方法來實現這種行爲？

下面是引用的CSS：（表體中的類是scrollContent）

/* define height and width of scrollable area. Add 16px to width for scrollbar */ 
div.tableContainer { 
    clear: both; 
    overflow: auto; 
    width: 100%; 
} 

/* set table header to a fixed position. WinIE 6.x only           */ 
/* In WinIE 6.x, any element with a position property set to relative and is a child of   */ 
/* an element that has an overflow property set, the relative value translates into fixed. */ 
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to  auto */ 
thead.fixedHeader tr { 
    position: relative 
} 

/* set THEAD element to have block level attributes. All other non-IE browsers    */ 
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */ 
html>body thead.fixedHeader tr { 
    display: block; 
    width: 100% 
} 

/* define the table content to be scrollable             */ 
/* set TBODY element to have block level attributes. All other non-IE browsers   */ 
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */ 
/* induced side effect is that child TDs no longer accept width: auto      */ 
html>body tbody.scrollContent { 
    display: block; 
    overflow-y: auto; 
    overflow-x: hidden; 
    width: 100%; 
}

來源

2011-09-16 Julien Bourdon

只有CSS，我不這麼認爲。你可以做的最好的方法是在'body'上設置一個'min-width'，然後如果你使用窗口的水平滾動條向右滾動，那麼表格的垂直滾動條就會顯示出來。 JavaScript/jQuery是一個選項嗎？ – thirtydot

我們可以看到一些html/a demo /更多的頁面嗎？ –

如果JavaScript/JQuery與現有的腳本排序表內容不衝突，那麼它肯定是一個選項。我必須承認，在兩個不同的開發人員組織代碼的可怕方式之後，我必須接受這個項目。但是，如果JavaScript中存在一個簡單的解決方案，我肯定會使用它。 –

其實你如果你改變溢出-X：滾動或汽車應該解決的問題。由於它隱藏，所以他們無法訪問滾動條，這可能是他們的抱怨。

另一種選擇是運行一個javascript或jquery來檢查屏幕分辨率，然後用不同的表格替換表格或用較小的圖像替換圖像。這將允許表格調整大小，以便它可以顯示在非最大化窗口中。

/---- ----編輯/

檢查窗口調整大小（你也沒有做到這一點，你可以做一個元素上，但該窗口會給你在窗口上更。他們是否調整它們的窗口準確讀

var timerID = 0, 
var winWidth = $(window).width(), 
var winHeight = $(window).height(); 

$(document).ready(function() 
{ 
    $(window).resize(function() 
    { 
     var winNewWidth = $(window).width(), 
      winNewHeight = $(window).height(); 
     if(winWidth != winNewWidth || winHeight != winNewHeight) 
     { 
      window.clearTimeout(timerID); 
      timerID = window.setTimeout(function() 
      { 
       // do something here 
      },100) 
     } 
     winWidth = winNewWidth; 
     winHeight = winNewHeight 
    }); 
});

來源

2011-09-17 03:49:27 CBRRacer

他們實際上想要隱藏水平滾動條。問題在於垂直滾動條在調整大小時不遵循窗口的右邊緣。 –

就分辨率檢查而言，即使調整窗口大小，滾動條也應始終可見。我想我可以使用jQuery窗口。然後onresize。 –

根據你的客戶想要的jquery window.resize的標準可能是最好的概念。查看我的編輯 – CBRRacer

變化從CSS的oversflow行爲始終顯示，像這樣：

html>body tbody.scrollContent { 
    display: block; 
    overflow-y: scroll; //this will make sure to always display the scrollbar, whether it's active (available for scrolling) or not. 
    overflow-x: hidden; 
    width: 100%; 
}

來源

2011-09-17 03:55:12

也許我沒有正確地問我的問題。正如我在評論中所說的那樣，滾動條實際上並沒有「消失」，它只是在調整大小時不遵循瀏覽器窗口的右邊緣。 –

僅供參考那些誰以後會訪問這個網頁，這裏是最終的代碼：

var winWidth = $(window).width(); 
var winHeight = $(window).height(); 
var winWidthDiff = 0; 
var winHeightDiff = 0; 
$i('scrollContent').style.maxWidth= ((winWidth-16)+"px"); 
$(window).resize(function(){ 
     var winNewWidth = $(window).width(); 
     var winNewHeight = $(window).height(); 
     winWidthDiff = winNewWidth - winWidth; 
     winHeightDiff = winNewHeight - winHeight; 
     winWidth = winNewWidth; 
     winHeight = winNewHeight; 
     scrollWidth = scrollWidth + winWidthDiff; 
     scrollHeight = scrollHeight + winHeightDiff; 
     $i('scrollContent').style.maxWidth= ((winWidth-16)+"px"); 
});

來源

2011-09-19 13:02:21

窗口滾動條在窗口的大小調整上消失

回答

相關問題