2. 程式人生 > >css隱藏滾動條，相容ie和chrome

css隱藏滾動條，相容ie和chrome

阿新 • • 發佈：2019-01-15 
之前隱藏滾動條一直用的::-webkit-scrollbar(chrome)和scrollbar-......-color一套(ie)。
ie下貌似只能修改顏色，於是我把它改成和背景一樣，假裝它隱藏了。。。
某日在研究某站時發現了另一種思路：套個div，用overflow: hidden把它隱藏起來，但得計算寬度。
最近看了點css3，忽然有個大膽的想法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title
 
>
        <style type="text/css">
            #wrap {
                width: 383px;
                /*width: 30%;*/
                overflow: hidden;
            }
            #content {
                height: 500px;
                width: -webkit-calc(100% + 17px);
                width: -moz-calc(100
 
% + 17px);
                width: calc(100% + 17px);
                overflow-y: auto;
            }

        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="content">
                黃初三年， 餘朝京師， 還濟洛川。 古人有言， 斯水之神， 名曰宓妃。 感宋玉對楚王神女之事， 遂作斯賦。 其辭曰：
                餘從京域， 言歸東藩。 背伊闕， 越轘轅， 經通谷， 陵景山。 日既西傾， 車殆馬煩。 爾乃稅駕乎蘅皋， 秣駟乎芝田， 容與乎陽林， 流眄乎洛川。 於是精移神駭， 忽焉思散。 俯則末察， 仰以殊觀， 睹一麗人， 於巖之畔。 乃援御者而告之曰： “爾有覿於彼者乎？ 彼何人斯？ 若此之豔也！” 御者對曰： “臣聞河洛之神， 名曰宓妃。 然則君王所見， 無乃日乎？ 其狀若何？ 臣願聞之。”
                餘告之曰： “其形也， 翩若驚鴻， 婉若游龍。 榮曜秋菊， 華茂春鬆。 彷彿兮若輕雲之蔽月， 飄搖兮若流風之迴雪。 遠而望之， 皎若太陽升朝霞； 迫而察之， 灼若芙蕖出淥波。 穠纖得衷， 修短合度。 肩若削成， 腰如約素。 延頸秀項， 皓質呈露。 芳澤無加， 鉛華弗御。 雲髻峨峨， 修眉聯娟。 丹脣外朗， 皓齒內鮮， 明眸善睞， 靨輔承權。 瑰姿豔逸， 儀靜體閒。 柔情綽態， 媚於語言。 奇服曠世， 骨像應圖。 披羅衣之璀粲兮， 珥瑤碧之華琚。 戴金翠之首飾， 綴明珠以耀軀。 踐遠遊之文履， 曳霧綃之輕裾。 微幽蘭之芳藹兮， 步踟躕于山隅。
                於是忽焉縱體， 以遨以嬉。 左倚採旄， 右蔭桂旗。 壤皓腕於神滸兮， 採湍瀨之玄芝。 餘情悅其淑美兮， 心振盪而不怡。 無良媒以接歡兮， 託微波而通辭。 願誠素之先達兮， 解玉佩以要之。 嗟佳人之信修， 羌習禮而明詩。 抗瓊［王弟］以和予兮， 指潛淵而為期。 執眷眷之款實兮， 懼斯靈之我欺。 感交甫之棄言兮， 悵猶豫而狐疑。 收和顏而靜志兮， 申禮防以自持。
                於是洛靈感焉， 徙倚彷徨， 神光離合， 乍陰乍陽。 竦輕軀以鶴立， 若將飛而未翔。 踐椒塗之郁烈， 步蘅薄而流芳。 超長吟以永慕兮， 聲哀厲而彌長。
                爾乃眾靈雜遢， 命儔嘯侶， 或戲清流， 或翔神渚， 或採明珠， 或拾翠羽。 從南湘之二妃， 攜漢濱之遊女。 嘆匏瓜之無匹兮， 詠牽牛之獨處。 揚輕袿之猗靡兮， 翳修袖以延佇。 體迅飛鳧， 飄忽若神， 凌波微步， 羅襪生塵。 動無常則， 若危若安。 進止難期， 若往若還。 轉眄流精， 光潤玉顏。 含辭未吐， 氣若幽蘭。 華容婀娜， 令我忘餐。
                於是屏翳收風， 川后靜波。 馮夷鳴鼓， 女媧清歌。 騰文魚以警乘， 鳴玉鸞以偕逝。 六龍儼其齊首， 載雲車之容裔， 鯨鯢踴而夾轂， 水禽翔而為衛。
                於是越北沚。 過南岡， 紆素領， 回清陽， 動朱脣以徐言， 陳交接之大綱。 恨人神之道殊兮， 怨盛年之莫當。 抗羅袂以掩涕兮， 淚流襟之浪浪。 悼良會之永絕兮。 哀一逝而異鄉。 無微情以效愛兮， 獻江南之明。 雖潛處於太陽， 長寄心於君王。 忽不悟其所舍， 悵神宵而蔽光。
                於是背下陵高， 足往神留， 遺情想像， 顧望懷愁。 冀靈體之復形， 御輕舟而上溯。 浮長川而忘返， 思綿綿督。 夜耿耿而不寐， 沾繁霜而至曙。 命僕伕而就駕， 吾將歸乎東路。 攬騑轡以抗策， 悵盤桓而不能去。
            </div
 
>
        </div>

    </body>
</html>
copy了篇洛神賦，擠出個滾動條。滾動條大概17px寬，使用css3的calc計算一下寬度，

剛好把它hidden掉。外面一層不管是用的百分比還是固定寬度都可以，而且關鍵是ie11和chrome都相容。
應用樣式前ie

相關推薦

css隱藏滾動條，相容ie和chrome

之前隱藏滾動條一直用的::-webkit-scrollbar(chrome)和scrollbar-......-color一套(ie)。 ie下貌似只能修改顏色，於是我把它改成和背景一樣，假裝它隱藏了。。。 某日在研究某站時發現了另一種思路：套個div，用ove

自定義瀏覽器滾動條的樣式，打造屬於你的滾動條風格——相容IE和webkit(ff不支援)

前段時間，到網上找素材時，看到了一個很個性的滾動條式，開啟Chrome的除錯工具看了一下，發現不是用JavaScript來模擬實現的，覺得 有必要折騰一下。於是在各大瀏覽器中對比了一下，發現只用Chrome適用，也就是說這個用的是Chrome的私有CSS屬性。便百之谷之後，發現原來不 僅僅只用Chrome，

div隱藏滾動條仍保留滾動效果，相容IE，FF，Webkit 和 O

只能說，既然需求有，那就得硬著頭皮做！光這個相容滾動條就花了我一早上+下午倆小時的時間！ 需求： 一個可以滾動內容的div，超出高度隱藏內容，但是要保留滾動效果又不出現滾動條，同時相容各種瀏覽器。 思路： 假設這個div叫做scroll_con

瀏覽器css隱藏滾動條的方法！除了IE一般都支援

::-webkit-scrollbar { /* 滾動條整體部分 */ width:0px; margin-right:2px}::-webkit-scrollbar-track-piece { /*內層軌道，滾動條中間部分 */ background-color: white;} ::-webkit-sc

純css，div隱藏滾動條，保留滑鼠滾動效果

當我們的內容超出了我們的div，往往會出現滾動條，影響美觀。 尤其是當我們在做一些導航選單的時候。滾動條一出現就破壞了UI效果。 我們不希望出現滾動條，也不希望超出去的內容被放逐，就要保留滑鼠滾動的效果。 這裡介紹一個簡單的方法。 大體思路是在div外面

純CSS隱藏滾動條

-s ado color kit style inset sha AD code ::-webkit-scrollbar {width: 0px;height: 1px;}::-webkit-scrollbar-thumb {border-radius: 5px;-web

css隱藏滾動條

生效 fire 方法 介紹 span html中 需求 tran 就是 xhtml中隱藏滾動條在用ie6瀏覽有框架的xhtml頁面的時候，默認會水平和垂直滾動條會一起出現，這是ie6的一個bug，在firefox上是正常的，出現的原因是其對XHTML 1.0 transi

隱藏滾動條，可以適用於移動頁面

需要可以滾動顯示，但是隱藏滾動條。百度了一通， 很多都是 去掉滾動條，多出的部分隱藏的！ 很簡單隻需要 加上一句即可 ： ::-webkit-scrollbar{             displ

css 隱藏滾動條 但是可以滾動

.gameConsUl{ height: 210px;overflow-y: scroll; } .gameConsUl::-webkit-scrollbar { display:none }

純css實現三角原理，相容IE

css實現三角形的原理是：當元素的寬高為0，邊框(border)不為0時，四個角邊框交界重疊處分45度角平分。 如果4種顏色只保留一種顏色，餘下3種顏色設定為透明（或者設定為和背景色相同的顏色），就出現一個小三角了。 只保留上面的顏色，如下圖： disp

JS中如何傳遞Event物件，相容IE和FireFox

（1）IE 在IE中，事件沒有event屬性，但是window有，即window.event。 獲取event的方式為： document.onclick=function(){ alert(window.event.clientX); } 獲取呼叫事件的物件windo

3種方法實現CSS隱藏滾動條並可以滾動內容

原文連結：http://caibaojian.com/hide-scrollbar.html 隱藏滾動條的同時還需要支援滾動，我

js相容ie和chrome的檔案上傳大小校驗

js 檔案上傳功能在ie8和chrome下的語法會有不一樣的地方，取決於瀏覽器對file檔案物件的獲取不一樣。ie通過FileSystemObject此物件獲取，而chrome獲取$(“input[name=’file’]”).file[0].size獲取。

css中移動端和pc端隱藏滾動條

思路：（以隱藏橫行滾動條為例） 在原有盒子的基礎上，外層套一個盒子，設定一個高度，超出隱藏，原有盒子的高度大於外層盒子的高度即可 程式碼如下： html部分： <div class="hid

CSS設定滾動條樣式（相容IE）

廢話不多說，直接上demo，最下面有詳細註釋。 1、這是在webkit瀏覽器下顯示的樣式。            （個人比較喜歡簡約點的） 2、在IE瀏覽器下顯示的樣式（為了區分所以樣式寫的不一

前端切圖:CSS實現隱藏滾動條同時又可以滾動

content gin cap origin format cimage src eight 技術 CSS 實現隱藏滾動條同時又可以滾動 原始功能： 添加偽類之後的功能： 完整demo如下： <!DOCTYP

CSS中隱藏滾動條的方法

4.0 pan XML 保持 水平 區別 來看 精確 為我 xhtml中隱藏滾動條 在用ie6瀏覽有框架的xhtml頁面的時候，默認會水平和垂直滾動條會一起出現，這是ie6的一個 bug，在firefox上是正常的，出現的原因是其對XHTML 1.0 transition

CSS 實現隱藏滾動條同時又可以滾動

tricks 原生 .org 介紹 lang target ken 滾動條 gpo 移動端頁面為了更接近原生的體驗，是否可以隱藏滾動條，同時又保證頁面可以滾動？ 使用 overflow:hidden 隱藏滾動條，但存在的問題是：頁面或元素失去了滾動的特性。由於只需要兼

css設定滾動條樣式，解決ios修改滾動條樣式無效問題

css部分 /* 橫向滾動容器 */ .scroll-wrapper { width: 100%; overflow-x: auto; height: 22px; white-space: nowrap; display: flex;

CSS 元素超出部分滾動, 並隱藏滾動條（2種方法）

方法一, 利用 css 3 的新特性  -webkit-scrollbar, 但是這種方式不相容 火狐 和 IE <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &