滾動條樣式修改(滾動條樣式修改后不生效)

更新時間:2023-03-01 00:20:47 閱讀：評論：0

瀏覽器滾動條樣式設置

在開發過程中會經常遇到列表過多，然后需要滾動顯示的需求，然而瀏覽器自帶的滾動條樣式往往與項目整體界面風格不搭，并且還可能有點丑，就需要去調整他的樣式。

目前我使用過兩種方法：

1、隱藏滾動條，或者控制滾動條寬度。目前各個瀏覽器沒有統一的樣式處理，需要針對瀏覽器分別設置。

（1）chrome或safari：

node::-webkit-scrollbars { width: 0; // display:none; }

（2）firefox

node { scrollbar-width:none; }

（3）IE

node { -ms-overflow-style:none; }

2、修改滾動塊，滾動槽的樣式。目前只了解到chrome的樣式修改

（1）chrome

node::-webkit-scrollbar-track {} //修改滾動槽的樣式

node::-webkit-scrollbar-thumb {} //修改滾動塊的樣式

因為平時工作都是運用的react框架開發，所以經過我的一番嘔心瀝血的查找，發現了這個賊好用的插件！

安裝： npm i react-custom-scrollbars

導入： import Scrollbars from "react-custom-scrollbars";

可配置項：

class CustomScrollbars extends Component {

  render() {

    return (

      <Scrollbars

        onScroll={this.handleScroll} //滾動監聽函數

        onScrollFrame={this.handleScrollFrame}

        onScrollStart={this.handleScrollStart} //滾動開始時執行的函數

        onScrollStop={this.handleScrollStop} //滾動結束時執行的函數

        onUpdate={this.handleUpdate}

        renderView={this.renderView}

//自定義水平滾動槽樣式

        renderTrackHorizontal={(props)=><div className="my-style" {...props}></div>}

//自定義垂直滾動槽樣式

renderTrackVertical={(props)=><div className="my-style" {...props}></div>}

       //自定義水平滾動塊樣式

        renderThumbHorizontal={(props)=><div className="my-style" {...props}></div>}

// 自定義垂直滾動塊樣式

        renderThumbVertical={(props)=><div className="my-style" {...props}></div>}

        autoHide //鼠標移除自動隱藏

        autoHideTimeout={1000} //設置隱藏的延遲執行時間

        autoHideDuration={200} //設置隱藏動畫的持續時間

        autoHeight //根據所包含的節點自動調整高度

        autoHeightMin={0} //自動調整的最小高度

        autoHeightMax={200} //自動調整的最大高度，超過則滾動顯示

        thumbMinSize={30} //滾動塊的最小高度（默認自適應）

        universal={true}

        {...this.props}>

...需要滾動顯示的dom樹

</Scrollbars>

    );

  }

}

用css怎么設置div滾動條的樣式，可改變大小的

在css設置可改變大小的div滾動條樣式方法：

1.首先新建html文檔，進入代碼書寫界面。

2.在</head>和<body>的里面寫入代碼，在<div>里面寫入想要輸入的內容</div>。

3.書寫外層軌道css代碼。body::-webkit-scrollbar { width:20px; height:2px; background:#ccc; border-radius:10px;/*外層軌道*/}

這里主要是設置外層軌道的形狀和顏色。

4.書寫內層軌道css代碼。body::-webkit-scrollbar-thumb{ display:block; width:6px; margin:0 auto; border-radius: 10px; background:red;/*內層軌道*/}

這里主要是設置內層軌道的形狀和顏色。

5.代碼工作做完后，就可以查看效果，效果如下紅框所示，滾動條設置完成。

在css中怎樣改變滾動條的樣式

/*IE滾動條顏色設置*/
body{
	scrollbar-arrow-color:#f2f2f3;	/*上下箭頭*/
	scrollbar-track-color:#1589ce;	/*底層背景色*/
	scrollbar-face-color:#27aeff;	/*滾動條前景色*/
	scrollbar-Shadow-color:#1589ce;	/*滾動條邊線色*/
}
/*chrome滾動條顏色設置*/
body::-webkit-scrollbar{width:10px;height:10px;background-color:transparent;}/*定義滾動條高寬及背景高寬分別對應橫豎滾動條的尺寸*/
body::-webkit-scrollbar-track{background-color:#ccc;border-radius:10px;-webkit-box-shadow:int006pxrgba(0,0,0,0.3);}/*定義滾動條軌道內陰影+圓角*/
body::-webkit-scrollbar-thumb{background-color:#555;border-radius:10px;-webkit-box-shadow:int006pxrgba(0,0,0,.3);}/*定義滑塊內陰影+圓角*/

怎么樣改變滾動條樣式

您好，很高興為您解答。

在ListView中添加屬性：
android:scrollbarTrackVertical="@drawable/scrollbar_vertical_track"
android:scrollbarThumbVertical="@drawable/scrollbar_vertical_thumb"

scrollbar_vertical_track，crollbar_vertical_thumb自定義的xml文件，放在Drawable中，track是指長條，thumb是指短條，然后再xml中定義短條和長條的樣式

如若滿意，請點擊右側【采納答案】，如若還有問題，請點擊【追問】

希望我的回答對您有所幫助，望采納！

~ O(∩_∩)O~

如何實現CSS3自定義滾動條樣式

在chrome下可以自定義滾動條樣式，舉個例子

::-webkit-scrollbar
{
width:6px;
height:6px;
}
::-webkit-scrollbar-track-piece
{
background-color:rgba(204,204,204,0.66);
-webkit-border-radius:0px;
}
::-webkit-scrollbar-thumb
{
border-radius:6px;
-webkit-border-radius:6px;
background-color:#7b7b7b;
}
/*定義橫向和縱向交點的樣式*/
::-webkit-scrollbar-corner{background-color:transparent;}

這里可以定義滾動條的粗細度和顏色等，至于更具體的諸如分別定義橫豎滾動條樣式等需要你自行修改。

另外也可以利用一些開源的滾動條插件來實現你需要的效果，比如我之前使用過的nicescroll.js，在瀏覽器兼容方面會好一些，但是可能會對系統的穩定性有影響，這個需要你權衡。

css怎樣設置滾動條的顏色及樣式

改變瀏覽器默認的滾動條樣式：

//滾動條凹槽的顏色，還可以設置邊框屬性

::-webkit-scrollbar-track-piece {

background-color:#f8f8f8;

}

//滾動條的寬度

::-webkit-scrollbar {

width:9px;

height:9px;

}

//滾動條的設置

::-webkit-scrollbar-thumb {

background-color:#dddddd;

background-clip:padding-box;

min-height:28px;

}

::-webkit-scrollbar-thumb:hover {

background-color:#bbb;

}

擴展資料：

給某個div，class為test1加滾動條樣式：

.test1::-webkit-scrollbar {

width: 8px;

}

.test1::-webkit-scrollbar-track {

background-color:red;

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius:2em;

}

.test1::-webkit-scrollbar-thumb {

background-color:green;

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius:2em;

}

本文發布于:2023-02-28 19:10:00，感謝您對本站的認可！

本文鏈接：http://www.newhan.cn/zhishi/a/167760124753313.html

本文word下載地址：滾動條樣式修改(滾動條樣式修改后不生效).doc

本文 PDF 下載地址：滾動條樣式修改(滾動條樣式修改后不生效).pdf

上一篇：lennovo(lenovo聯想售后客戶服務中心)

下一篇：返回列表

標簽：樣式滾動條

留言與評論（共有 0 條評論）