谷歌滾動條樣式的修改

之前在做項目的時候遇到了一個問題际邻,當時因為我們做的項目是要對谷歌的滾動條進行再定義的,但是分配到我的那個頁面的時候是需要對滾動條進行再次還原的(滾動條的樣式一旦修改了之后庆捺,他原有的樣式就不存在了碉纳,所以所有的樣式就必須重新修改),也就是將滾動條再重新設置回原有的樣子绞旅,在網上找了很久,之后再一篇文章中找到了一些很不錯的方法温艇,下面分享給大家。
這是原文的鏈接blog.csdn.net/hanshileiai/article/details/40398177;

           這部分是對整個滾動條樣式的整體部分堕汞,顏色是背景色
         ::-webkit-scrollbar {
        width: 16px;
        height: 16px;
        background-color: #ddd;
    }
     
    ::-webkit-scrollbar-button:start:decrement,
    ::-webkit-scrollbar-button:end:increment {
        display: block;
    }
    ::-webkit-scrollbar-button:vertical:start:increment,
    ::-webkit-scrollbar-button:vertical:end:decrement {
        display: none;
    }
        這是用來定義滑塊的勺爱,包括鼠標移動到上面以后的情況。
        ::-webkit-scrollbar-thumb {
                              height:100px;
                                      border-radius: 0%;
                                    -webkit-box-shadow:  0 0 0 rgba(0, 0, 0, 0);
                                        background-color: #C1C1C1;
                                  }
                    ::-webkit-scrollbar-thumb:hover {
                    height:100px;
                                border-radius: 0%;
                                    -webkit-box-shadow:  0 0 0 rgba(0, 0, 0, 0);
                                    background-color: #A8A8A8;
                                }
      這里用這種背景圖片的方式是他的上下兩部f分可以變成谷歌滾動條的樣式讯检,圖片可以自己截圖琐鲁。
                              ::-webkit-scrollbar-button:end:increment {
                                  background-image: url(../../images/right.png);
                                            }
                                ::-webkit-scrollbar-button:start:decrement {
                                      background-image: url(../../images/left.png);
                          }
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末卫旱,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子围段,更是在濱河造成了極大的恐慌顾翼,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件奈泪,死亡現(xiàn)場離奇詭異适贸,居然都是意外死亡,警方通過查閱死者的電腦和手機涝桅,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進店門拜姿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人冯遂,你說我怎么就攤上這事蕊肥。” “怎么了蛤肌?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵壁却,是天一觀的道長。 經常有香客問我裸准,道長展东,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任狼速,我火速辦了婚禮琅锻,結果婚禮上,老公的妹妹穿的比我還像新娘向胡。我一直安慰自己恼蓬,他們只是感情好,可當我...
    茶點故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布僵芹。 她就那樣靜靜地躺著处硬,像睡著了一般。 火紅的嫁衣襯著肌膚如雪拇派。 梳的紋絲不亂的頭發(fā)上荷辕,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天,我揣著相機與錄音件豌,去河邊找鬼疮方。 笑死,一個胖子當著我的面吹牛茧彤,可吹牛的內容都是我干的骡显。 我是一名探鬼主播,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼惫谤!你這毒婦竟也來了壁顶?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤溜歪,失蹤者是張志新(化名)和其女友劉穎若专,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蝴猪,經...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡调衰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了拯腮。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片窖式。...
    茶點故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖动壤,靈堂內的尸體忽然破棺而出萝喘,到底是詐尸還是另有隱情,我是刑警寧澤琼懊,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布阁簸,位于F島的核電站,受9級特大地震影響哼丈,放射性物質發(fā)生泄漏启妹。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一醉旦、第九天 我趴在偏房一處隱蔽的房頂上張望饶米。 院中可真熱鬧,春花似錦车胡、人聲如沸檬输。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽丧慈。三九已至,卻和暖如春主卫,著一層夾襖步出監(jiān)牢的瞬間逃默,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工簇搅, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留完域,地道東北人。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓瘩将,卻偏偏與公主長得像筒主,于是被迫代替她去往敵國和親关噪。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,514評論 2 348

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,774評論 25 707
  • 在此特此聲明:一下所有鏈接均來自互聯(lián)網乌妙,在此記錄下我的查閱學習歷程,感謝各位原創(chuàng)作者的無私奉獻 建钥! 技術一點一點積...
    遠航的移動開發(fā)歷程閱讀 11,087評論 12 197
  • 一個人可以走的很快藤韵,一個團隊可以走的很遠。
    肖恩2017閱讀 126評論 0 0
  • 在夏末,初秋镐依,這個有著那么一點點傷感的又尷尬的季節(jié)里匹涮,我種了三朵百合。 第一次養(yǎng)植物槐壳,害怕長不好然低,一天要觀察很多次...
    曉曉的張閱讀 253評論 0 0
  • 參不參加由你定,有啥意見跟我說务唐。 若是心打退堂鼓雳攘,惡魔都在鄙視你。 身體不適也可以枫笛,下次你來我歡迎吨灭! 要是想來給我...
    劉婧_閱讀 248評論 5 17