magic-page-designer/src/components/scroll-container/scroll-container.less

magic-page-designer 是一个基于 vue 的在线页面快速开发平台，主要把所有的 vue 代码都改为在线配置，最终获得一个 json 格式的页面，你可以把它存放到服务器的任何地方：数据库、静态文件、redis 等。最方便的是可以在线修改页面，再也不用担心生产出问题了，还得打开 IDE，修改测试打包，直接在线编码，所见即所得。还可以配合 [magic-api](https://gitee.com/ssssssss-team/magic-api) 使用，完全抛弃 IDE，随时随地 code w

.mpd-scroll-container.invisible .mpd-scroll-bar-thumb {
  opacity: 0;
  transition: opacity 800ms linear;
}
.mpd-scroll-container.visible .mpd-scroll-bar-thumb {
  opacity: 1;
  transition: opacity 200ms linear;
}
.mpd-scroll-container {
  position: relative;
  --mpd-scroll-bar-width: 6px;

  .mpd-scroll-body {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .mpd-scroll-view {
      position: absolute;
      min-width: 100%;
      min-height: 100%;
    }
  }

  .mpd-scroll-bar {
    position: absolute;
    .mpd-scroll-bar-thumb {
      background-color: var(--mpd-scroll-bar-thumb-bg-color, rgba(121, 121, 121, 0.4));
      width: 100%;
      height: 100%;
      border-radius: var(--mpd-scroll-bar-width);
    }
    .mpd-scroll-bar-thumb:hover {
      background-color: var(--mpd-scroll-bar-thumb-hover-bg-color, rgba(100, 100, 100, 0.7));
    }
  }

  // 横向滚动条
  .horizontal {
    width: 100%;
    height: var(--mpd-scroll-bar-width);
  }

  // 纵向滚动条
  .vertical {
    height: 100%;
    width: var(--mpd-scroll-bar-width);
  }

  // 隐藏原生滚动条
  .mpd-scroll-body::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 0;
  }
}