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>
  )
}

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;
    }
  }
}

Vue.js与React主要区别在哪？（附示例）

css如何去掉滚动条占用的高度

如何利用css怎么隐藏scroll滚动条

ios系统内容滚动条卡住怎么解决

react有哪些脚手架需要安装（依赖命令）

标签： JSX, less, react, 滚动条

上面是“react如何实现滚动条（全部代码）”的全面内容，想了解更多关于 reactjs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2946.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！