禁止 和 啟用 瀏覽器 滾動條

2021-08-29 09:45:33 字數 801 閱讀 1572

在寫乙個在頁面中,經驗證使用者沒有登入或會話時候失效彈出登入框禁止頁面滾動用到

今天搞了乙個功能,上下左右居中,模仿qq空間裡的樣式,把橫向和縱向滾動條禁止掉**

如下://禁止滾動條

$(document.body).css();

//啟用滾動條

$(document.body).css();

我相信大家對這個**應該無異議吧,如果有請高手給予指點。測試結果如下:

ie6:禁止滾動條正常,啟動滾動條錯誤,出現雙滾動條且滾動條滾動頁面無反應。

ie7:禁止滾動條正常,啟動滾動條正常。ie9

:禁止滾動條正常,啟動滾動條正常.ek9

:禁止滾動條正常,啟動滾動條正常

.chrome:

禁止滾動條正常,啟動滾動條正常。 

禁止滾動條正常,啟動滾動條正常

.firefox:

靠,又是ie6 ie7和,微軟真的該反省了,所以說做產品得一開始就要負責人

。別扯遠了,解決方法是當溢位設定隱藏以後,直接取消這個風格而不要設定溢位,具體**如下:

//為了簡便定義乙個樣式類

.html-body-overflow

//禁止滾動條(預設是沒有附加這個樣式類的)

$(document.body).toggleclass(「html-body-overflow」);

//啟動滾動條

$(document.body).toggleclass(「html-body-overflow」);

當然也可以直接清掉style的內容,不過上面的做法更直觀,更簡單。

瀏覽器滾動條

做 時發現登入成功後瀏覽器滾動條消失無法滾動頁面 通過觀察和除錯,發現是強制隱藏了bootstrap的模態框後,body的overflow變為了hidden,同時也多了乙個17px的右內邊距,無法呼叫出垂直滾動條,解決方案 隱藏模態框的同時設定body的overflow為scroll,同時取消右內邊...

iframe滾動條充當瀏覽器滾動條

在做部落格專案的時候,使用了iframe,方便根據選擇的文章類別切換顯示的內容,但是文章一般都有很多,通過bootstrap的 列表的方式顯示的話,iframe是一定會出現滾動條的,特別是我新增了乙個 滾動條觸底之後動態載入更多的文章 的功能。這樣頁面上就會有兩個滾動條,特別奇怪。在網上學習了一些之...

瀏覽器滾動條相關

先去mdn 檢視這兩個概念 scrollheight 以及 clientheight 1,判斷是否存在滾動條 if element.scrollheight element.clientheight 0 2,判斷乙個容器滾動條,沒有在最上面,怎麼判斷 if element.scrolltop 0 3...