react如何實現(xiàn)滾動條

這篇“react如何實現(xiàn)滾動條”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“react如何實現(xiàn)滾動條”文章吧。

react實現(xiàn)滾動條的方法：1、使用“render() {const translateDistancePercentage...}”方式設(shè)置滾動條滾動百分比；2、通過“.scrollBar {width: 362px;...}”設(shè)置滾動條寬度；3、設(shè)置樣式為“l(fā)eft: -362px;top: 0px;position: absolute;”即可。

React-實現(xiàn)滾動條

一、實現(xiàn)效果

二、實現(xiàn)代碼

jsx

render() {
const translateDistancePercentage = '33.33333333333333'; // 滾動條滾動百分比
console.log('滾動條滾動百分比' + translateDistancePercentage);
return (
// 滾動條
<div className="scrollBar" style={{ 'backgroundImage': `url(首頁/滾動條外殼.png)` }}>
    <div className="scrollBarHousing">
        <span className="insideScrollBar" style={{ 'transform': `translateX(${translateDistancePercentage}%)`, 'backgroundImage': `url(首頁/滾動條內(nèi)里.png)` }}></span>
    </div>
</div>
)
}

less

 .scrollBar {
 /** 滾動條寬度 */
    width: 362px;
    height: 12px;
    left: 0px;
    top: 36px;
    position: absolute;
    opacity: 0.7;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    .scrollBarHousing {
      width: 100%;
      height: 100%;
      left: 0px;
      top: 0px;
      position: absolute;
      border-radius: 60px;
      /** 下面這個很關(guān)鍵喔 */
      overflow: hidden;
      .insideScrollBar {
        width: 100%;
        height: 100%;
        /** 讓滾動條內(nèi)里一來就先位于滾動條外最左側(cè) */
        left: -362px;
        top: 0px;
        position: absolute;
        border-radius: 60px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
    }
}

下圖圈出來了一些關(guān)鍵樣式，顏色相同滴前后呼應(yīng)喔~

以上就是關(guān)于“react如何實現(xiàn)滾動條”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。