<template>
  <div class="WScroll">
    <div>
      <slot></slot>
    </div>
  </div>
</template>


<style lang="scss">
.WScroll {
  position: relative;

  & > div {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: var(--overflow, inherit);
    overflow-x: var(--overflow-x, inherit);
    overflow-y: var(--overflow-y, scroll);

    /* 滚动条和滑块 */
    &::-webkit-scrollbar,
    &::-webkit-scrollbar-thumb {
      width: 0.4em;
      height: 0.4em;
      border-radius: 1em;
    }

    /* 滑块背景色 */
    &::-webkit-scrollbar-thumb {
      background: var(--c, #3181c0);
    }

    /* 其余相关样式设置跟滑块一个背景色 */
    &::-webkit-scrollbar,
    &::-webkit-scrollbar-corner,
    &::-webkit-resizer,
    &::-webkit-scrollbar-track,
    &::-webkit-scrollbar-track-piece {
      background: #0000;
    }
    
    &::-webkit-scrollbar {
      background: var(--c-bg, #0001);
    }

    /* 隐藏滚动条按钮 */
    &::-webkit-scrollbar-button {
      display: none;
    }
  }
}
</style>