SS 禁止瀏覽器滾動(dòng)條的方法(轉(zhuǎn))

1、完全隱藏 在<boby>里加入scroll="no", 可隱藏滾動(dòng)條；

<boby scroll="no">

這個(gè)我用的時(shí)候完全沒效果, 不知道是什么原因! 不過好多人說這么用可以, 大概是用的位置不一樣吧

2、在不需要時(shí)隱藏 指當(dāng)瀏覽器窗口寬度或高度大于頁面的寬或高時(shí), 不顯示滾動(dòng)條；反之, 則顯示:

<boby scroll="auto">

3、樣式表方法 在<boby>里加入style="overflow-x:hidden", 可隱藏水平滾動(dòng)條；加入style="overflow-y:hidden", 可隱藏垂直滾動(dòng)條。

被包含頁面里加入 <style> html { overflow-x:hidden; } </style> 有一段解釋是這樣說的：body{ overflow-x:hidden; }在標(biāo)準(zhǔn) DTD 下是不可以的

我的問題是用這段代碼解決的body{overflow-y:hidden; }

4、另一種方法

<style type="text/css"> html { overflow-x:hidden; overflow-y:hidden; } </style>

5、在用ie6瀏覽有框架的xhtml頁面的時(shí)候, 默認(rèn)會(huì)水平和垂直滾動(dòng)條會(huì)一起出現(xiàn), 這是ie6的一個(gè)bug, 在firefox上是正常的, 出現(xiàn)的原因是其對(duì)XHTML 1.0 transitional doctype的解釋缺陷.

對(duì)于這個(gè)bug一般有3種解決方案，

方法1: 代碼：

html { overflow-y: scroll; }

原理：強(qiáng)制顯示ie的垂直滾動(dòng)條，而忽略水平滾動(dòng)條 優(yōu)點(diǎn)：完全解決了這個(gè)問題, 允許你保持完整的XHTML doctype.

缺點(diǎn)：即使頁面不需要垂直滾動(dòng)條的時(shí)候也會(huì)出現(xiàn)垂直滾動(dòng)條。

方法2: 代碼：

html { overflow-x: hidden; overflow-y: auto; }

原理：隱藏橫向滾動(dòng)，垂直滾動(dòng)根據(jù)內(nèi)容自適應(yīng)

優(yōu)點(diǎn)：在視覺上解決了這個(gè)問題.在不必要的時(shí)候, 未強(qiáng)制垂直滾動(dòng)條出現(xiàn).

缺點(diǎn)：只是隱藏了水平滾動(dòng)條，如果頁面真正需要水平滾動(dòng)條的時(shí)候， 屏幕以外的內(nèi)容會(huì)因?yàn)橛脩魺o法水平滾動(dòng)，而看不到。

方法3: 代碼：

body { margin-right: -15px; margin-bottom: -15px; }

原理：這會(huì)在margin的水平和垂直方向上添加一個(gè)負(fù)值, IE添加了該精確數(shù)值后, 便會(huì)去除對(duì)滾動(dòng)條的需求假象.

優(yōu)點(diǎn)：在視覺上解決了這個(gè)問題, 垂直滾動(dòng)根據(jù)內(nèi)容自適應(yīng)

缺點(diǎn)：由于"人為創(chuàng)建"了15px的外邊距(margin), 所以無法使用該填充過的屏幕區(qū)域

序：

CSS本身是一個(gè)常用且強(qiáng)大的功能，但是往往很多人在學(xué)習(xí)的時(shí)候會(huì)忽視掉其中一些細(xì)節(jié)的使用，而我們程序員忽視掉一個(gè)細(xì)節(jié)就可能完成不了這道老板出給我們的題目，成為高手的道路也會(huì)離我們?cè)絹碓竭h(yuǎn)，這里我在分享一個(gè)我多年來總結(jié)下來的一句話-驚喜往往是有準(zhǔn)備的人事先預(yù)謀的，而不是突然產(chǎn)生的，頁面樣式好不好看取決于我的知識(shí)面有多廣

分享2種方法實(shí)現(xiàn)CSS如何隱藏滾動(dòng)條，同時(shí)仍然可以在任何元素上滾動(dòng)？我們經(jīng)常在前端開發(fā)中遇到這種情況，下面一起看看這兩種方法:

方法一：CSS偽裝法

方法二：CSS針對(duì)特定瀏覽器設(shè)置滾動(dòng)條樣式來實(shí)現(xiàn)。但是這個(gè)方法對(duì)瀏覽器版本要有要求,IE需要10+以上版本才支持。（考慮兼容性問題建議使用方法一）

關(guān)注小編頭條號(hào)私信【學(xué)習(xí)】，即可免費(fèi)領(lǐng)取本套學(xué)習(xí)資料.

、存在問題：

【1】線條會(huì)隨著滾動(dòng)條一起滾動(dòng)；

【2】線條SVG存在在多地方引用，存在罩層問題，或者遮擋問題，設(shè)置z-index無效

二、解決思路：

1、【1】問題解決辦法：

a、可以用transform: scale(0.8) CSS樣式來縮小畫布，達(dá)到取消滾動(dòng)條的目的

示例代碼：

transform: scale(0.8);

-moz-transform: scale(0.8); /* Firefox */

-webkit-transform:scale(0.8); /* Safari and Chrome */

-ms-transform:scale(0.8);

b、采用問題【2】的辦法，通過移動(dòng)SVG到里層，自定義發(fā)揮了

c、加入滾動(dòng)條監(jiān)聽，并使用自定義position()方法：

leader_line.position()； 備注：leader_line為線條預(yù)設(shè)自定義的變量

2、【2】問題問題闡述及解決辦法：

闡述：

leader-line，默認(rèn)生成在最外層body下，如果業(yè)務(wù)存在多層，且存在多個(gè)地方引用時(shí)，就無法用全局樣式z-index來控制外層顯示，比如彈窗，頁面線條設(shè)置z-index：1，彈窗部分線條設(shè)置z-index：999，當(dāng)關(guān)閉彈窗時(shí)，z-index就會(huì)變成最高值，如果再打開其他彈窗，那么線條會(huì)線上在彈窗之上，無法再通過z-index控制；

解決辦法：

可以把外層svg拷貝到需要的DIV里面，并刪除最外層svg；用這種方法能解決很多問題。

二、其他知識(shí)點(diǎn)：

1、移除線條：leader_line.remove()

2、顯示線條：leader_line.show()

3、隱藏線條：leader_line.hide()

PS：有其他問題也可以留言，說不定做項(xiàng)目過程中也遇到過