realtorEasier-webSite/pc/src/page/service/plugin/ff-scrollbar.vue

<template>
  <div class="outer" :class="{'isEn': language !== 'zh'}">
    <slot name="con"></slot>
    <div class="ff-scrollbar">
      <div ref="thumb" class="ff-scroll-thumb" :style="{top:scorlltop}"></div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  props: {
    scorlltop: {
      default: () => [],
      type: String
    }
  },
  computed: {
    ...mapState({
      language: state => state.language.current
    })
  }
}
</script>

<style lang="scss" scoped>
  $lw: 220px;
  $cw: 440px;
  $encw: 430px;
  .outer{
    overflow: hidden;
    max-height: 100%;
    height: calc(100vh - 380px);
    width: 440px;
    text-align: center;
    position: relative;
    &.isEn {
      width:410px;
    }
  }
  .ff-scrollbar{
    height: calc(100vh - 380px);
    position: absolute;
    right: 0;
    top: 0;
    width: 10px;
    background: none;
  }
  .ff-scroll-thumb{
    height: 50px;
    width: 5px;
    background-color: rgba(221, 221, 221, 0.2);
    border-radius: 5px;
    position: absolute;
    top: 0;
    right: 0;
  }
</style>