react如何实现滚动条（全部代码）

react如何做一个滚动条效果，下面web建站小编给大家详细介绍一下实现代码！

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(首页/滚动条内里.png)` }}></span>
    </div>
  </div>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12

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;
    /** 下面这个很关键 */
    overflow: hidden;
    .insideScrollBar {
      width: 100%;
      height: 100%;
      /** 让滚动条内里一来就先位于滚动条外最左侧 */
      left: -362px;
      top: 0px;
      position: absolute;
      border-radius: 60px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33