React中如何設(shè)置自定義滾動(dòng)條樣式
更新時(shí)間：2023年11月14日 09:58:05 作者：sg_knight
這篇文章主要介紹了React中如何設(shè)置自定義滾動(dòng)條樣式問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
React設(shè)置自定義滾動(dòng)條樣式
1、全局配置
在global.less文件添加如下配置
/*定義滾動(dòng)條高寬及背景 高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸*/
::-webkit-scrollbar {
width: 5px;
height: 10px;
}
/*定義滑塊 內(nèi)陰影+圓角*/
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.2);
border-radius: 10px;
}
/*定義滾動(dòng)條軌道 內(nèi)陰影+圓角*/
::-webkit-scrollbar-track {
border-radius: 10px;
}2、局部配置
在頁(yè)面內(nèi)部組件樣式中，使用global配置
.sectionLeft{
width: 12%;
height: 100%;
overflow: hidden;
background-color: #fff;
border-radius: 5px;
:global {
::-webkit-scrollbar {
width: 5px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.1);
border-radius: 10px;
}
::-webkit-scrollbar-track {
border-radius: 10px;
}
}
}react全局改變滾動(dòng)條樣式
/*整個(gè)滾動(dòng)條*/
::-webkit-scrollbar {
width: 5px;
height: 8px;
background-color: #fff;
}
/*定義滾動(dòng)條軌道*/
::-webkit-scrollbar-track {
background-color: #fff;
}
/*定義滑塊*/
::-webkit-scrollbar-thumb {
background-color: #ACB1BF;
border-radius: 4px;
}把上述代碼放入全局樣式中即可生效
::-webkit-scrollbar— 整個(gè)滾動(dòng)條.::-webkit-scrollbar-button— 滾動(dòng)條上的按鈕 (上下箭頭).::-webkit-scrollbar-thumb— 滾動(dòng)條上的滾動(dòng)滑塊.::-webkit-scrollbar-track— 滾動(dòng)條軌道.::-webkit-scrollbar-track-piece— 滾動(dòng)條沒(méi)有滑塊的軌道部分.::-webkit-scrollbar-corner— 當(dāng)同時(shí)有垂直滾動(dòng)條和水平滾動(dòng)條時(shí)交匯的部分.::-webkit-resizer— 某些元素的corner部分的部分樣式(例:textarea的可拖動(dòng)按鈕).
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了React中多語(yǔ)言的配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了詳解如何在React組件“外”使用父組件的Props，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了React中的不可變值的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用react.js，感興趣的朋友可以了解下2021-04-04
React代碼分割主要是為了優(yōu)化首屏加載速度,避免一次性加載整個(gè)應(yīng)用,把代碼拆分成多個(gè)bundle,按需加載,下面就一起來(lái)了解一下,感興趣的可以了解一下2025-09-09
詳解在React.js中使用PureComponent的重要性和使用方式
這篇文章主要介紹了詳解在React.js中使用PureComponent的重要性和使用方式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
在React應(yīng)用中，為了讓數(shù)據(jù)在組件間共享，常見(jiàn)的方式是讓它們以props的形式自頂向下傳遞，如果數(shù)據(jù)要在組件樹(shù)不同層級(jí)共享，那么這些數(shù)據(jù)必須逐層傳遞直到目的地，Context如同管道，它將數(shù)據(jù)從入口直接傳遞到出口，使用Context能避免“prop-drilling”2023-06-06
react native實(shí)現(xiàn)監(jiān)控手勢(shì)上下拉動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了react native實(shí)現(xiàn)監(jiān)控手勢(shì)上下拉動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了React類(lèi)組件的更新過(guò)程,包括組件初始化、更新和卸載的生命周期方法,以及如何使用setState和forceUpdate來(lái)控制視圖的更新,感興趣的朋友一起看看吧2025-01-01
react事件綁定時(shí)。this并不會(huì)指向當(dāng)前DOM元素。往往使用bind來(lái)改變this指向，今天通過(guò)本文給大家介紹React事件綁定的方式，感興趣的朋友2021-07-07
React router動(dòng)態(tài)加載組件之適配器模式的應(yīng)用詳解
這篇文章主要介紹了React router動(dòng)態(tài)加載組件之適配器模式的應(yīng)用 ,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09