關於IE下滾動條的問題

2021-04-24 09:22:57 字數 1651 閱讀 7924

如何讓ie下的滾動條在內容少的時候隱藏得更徹底呢?

滾動條的出現使固定的有限空間能夠展示更多的內容。但是當展示內容很少的時候,滾動條還需要嗎?這個情況下,firefox會將滾動條隱藏得很徹底,但是,ie做不到這樣,還留有滾動條的灰色痕跡。對比圖如下:

firefox 3.0.1:

ie7為例,ie6是同樣的狀況:

解決這個問題,採用的方法不妥,將使這個視窗始終沒有滾動條,多出的內容會被隱藏,看不到。

我們需要這樣的一種解決方案:當展示內容沒有超出當前視窗範圍時,將滾動條隱藏得無影無蹤(就像ff做得到的那樣);當內容超出當前視窗範圍時,滾動條要出來發揮作用(scroll="no")沒做到。

採用js實現的完整**如下:

testtesttesttesttesttesttesttesttestte ssttesttesttesttes testtesttestte sttestte sttesttestt esttest

test

test

test

test

test

test

test

test

對**進行的簡要分析如下:

只是需要對ie做這個調整,if(window.activexobject)只對ie起作用。

onresize事件保證了在視窗縮放的時候,能夠對內容是否超出視窗範圍進行判斷。這個事件的監聽需要使用到window.attachevent()方式才對ie起作用。

document.body.clientheight獲得展示內容的高度,document.documentelement.clientheight獲得瀏覽器視窗的高度。

一般情況下,給body標籤加上「overflow:hidden」屬性即可,但好像不起作用,原因在於文件頭引入了dtd標準,這個時候需要給html標籤設定「overflow:hidden」屬性,這樣就可以完全隱藏滾動條了。

至此,解決,附圖一張:

1、完全隱藏

在裡加入scroll="no",可隱藏滾動條;

2、在不需要時隱藏

指當瀏覽器視窗寬度或高度大於頁面的寬或高時,不顯示滾動條;反之,則顯示;

3、樣式表方法

在裡加入style="overflow-x:hidden",可隱藏水平滾動條;加入style="overflow-y:hidden",可隱藏垂直滾動條。

這種方法在頁面頭部為:http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd

">這種相容模式下是不行的,其它的沒試過,最後終於找到了正確的方法:

被包含頁面裡加入

有一段解釋是這樣說的:body在標準 dtd 下是不可以的。

4、另一種方法

此方法在頁面頭部為:http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd

">這種相容模式下也是不行的。

關於IE下滾動條的問題

1 完全隱藏 在裡加入scroll no 可隱藏滾動條 2 在不需要時隱藏 指當瀏覽器視窗寬度或高度大於頁面的寬或高時,不顯示滾動條 反之,則顯示 3 樣式表方法 在裡加入style overflow x hidden 可隱藏水平滾動條 加入style overflow y hidden 可隱藏垂直...

谷歌滾動條設定 IE滾動條設定

google瀏覽器chrome設定滾動條樣式 courrlist webkit scrollbar courrlist webkit scrollbar track courrlist webkit scrollbar thumb courrlist webkit scrollbar thumb w...

關於滾動條

定義滾動條軌道 style 3 webkit scrollbar track 定義滾動條高寬及背景 style 3 webkit scrollbar 定義滑塊 style 3 webkit scrollbar thumb 要在兩個div裡面顯示滾動條 1.首先div需要設定高度 2.內容必須超過di...