欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

CSS修改滾動(dòng)條默認(rèn)樣式的方法

這篇文章主要介紹CSS修改滾動(dòng)條默認(rèn)樣式的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

按需定制可以根據(jù)自己的需求進(jìn)行定制，成都網(wǎng)站建設(shè)、網(wǎng)站制作構(gòu)思過程中功能建設(shè)理應(yīng)排到主要部位公司成都網(wǎng)站建設(shè)、網(wǎng)站制作的運(yùn)用實(shí)際效果公司網(wǎng)站制作網(wǎng)站建立與制做的實(shí)際意義

/*作為IT界最前端的技術(shù)達(dá)人，頁面上的每一個(gè)元素的樣式我們都必須較真，就是滾動(dòng)條我們也不會(huì)忽略。下面我給大家分享一下如何通過CSS來控制滾動(dòng)條的樣式，代碼如下：*/ 1  /*定義滾動(dòng)條軌道*/
    #style-2::-webkit-scrollbar-track
    {
        background-color: #F5F5F5;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
    }
    /*定義滾動(dòng)條高寬及背景*/
    #style-2::-webkit-scrollbar
    {
        width: 10px;
        background-color: rgba(0, 0, 0, 0.34);
    }
    /*定義滾動(dòng)條*/
    #style-2::-webkit-scrollbar-thumb
    {
        background-color: #8b8b8b;
        border-radius: 10px;
    }

要實(shí)現(xiàn)單個(gè)div里面的內(nèi)容滾動(dòng)，需要滿足三個(gè)條件：

1、div必須設(shè)定固定的高度，不能使用百分比或 auto 等彈性值。

2、其中的內(nèi)容高度必須超過它本身的高度。

3、必須添加屬性 “overflow：auto”。

CSS修改滾動(dòng)條默認(rèn)樣式的方法

隱藏滾動(dòng)條：

1、去掉水平方向的滾動(dòng)條：

<body style="overflow-x:hidden">

2、去掉垂直方向的滾動(dòng)條：

<body style="overflow-y:hidden">

3、隱藏橫向、顯示縱向滾動(dòng)條：

<body style="overflow-x:hidden;overflow-y:scroll">

4、隱藏全部滾動(dòng)條：

<body style="overflow:hidden">或者<body scroll="no">

更好的方法就是把滾動(dòng)條的顏色設(shè)置為完全透明，這樣既可以實(shí)現(xiàn)內(nèi)容的滾動(dòng)，又達(dá)到不顯示滾動(dòng)條的目的。

應(yīng)用:

沒有水平滾動(dòng)條:

<div style="overflow-x:hidden">test</div>

沒有垂直滾動(dòng)條

<div style="overflow-y:hidden">test</div>

沒有滾動(dòng)條

<div style="overflow-x:hidden;overflow-y:hidden" 或 style="overflow:hidden">test</div>

自動(dòng)顯示滾動(dòng)條

<div style="height:100px;width:100px;overflow:auto;">test</div>

自己定義滾動(dòng)條的顏色，代碼如下：

Body {
scrollbar-arrow-color: #f4ae21; /*三角箭頭的顏色*/
scrollbar-face-color: #333; /*立體滾動(dòng)條的顏色*/
scrollbar-3dlight-color: #666; /*立體滾動(dòng)條亮邊的顏色*/
scrollbar-highlight-color: #666; /*滾動(dòng)條空白部分的顏色*/
scrollbar-shadow-color: #999; /*立體滾動(dòng)條陰影的顏色*/
scrollbar-darkshadow-color: #666; /*立體滾動(dòng)條強(qiáng)陰影的顏色*/
scrollbar-track-color: #666; /*立體滾動(dòng)條背景顏色*/
scrollbar-base-color:#f8f8f8; /*滾動(dòng)條的基本顏色*/
Cursor:url(mouse.cur); /*自定義個(gè)性鼠標(biāo)*/
}

以上2項(xiàng)適用與<body>、<div>、<textarea>、<iframe>

附：解釋一下overflow屬性和不同值得作用：

overflow:visible;不剪切內(nèi)容也不添加滾動(dòng)條。默認(rèn)值。使用該值時(shí)，無論設(shè)置的"width"和"height"的值是多少，其中的內(nèi)容無論是否超出范圍都將被強(qiáng)制顯示。

overflow：auto；在需要時(shí)剪切內(nèi)容并添加滾動(dòng)條。

overflow：hidden；不顯示超過對(duì)象高度的內(nèi)容。

overflow：scroll；總是顯示縱向滾動(dòng)條。

overflow 水平及垂直方向內(nèi)容溢出時(shí)的設(shè)置

overflow-x 水平方向內(nèi)容溢出時(shí)的設(shè)置

overflow-y 垂直方向內(nèi)容溢出時(shí)的設(shè)置

以上屬性設(shè)置的值為visible、scroll、hidden、auto

hidden 效果與visible相反。任何超出"width"和"height"的內(nèi)容都會(huì)不可見。

scroll 無論內(nèi)容是否超越范圍，都將顯示滾動(dòng)條。

以上是CSS修改滾動(dòng)條默認(rèn)樣式的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁名稱：CSS修改滾動(dòng)條默認(rèn)樣式的方法
當(dāng)前路徑：http://www.chinadenli.net/article10/pishgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、域名注冊(cè)、做網(wǎng)站、電子商務(wù)、解決方案、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)