随笔 之 滚动条样式CSS

看看效果

 

/**使用时用这个class即可    elx-dataBig--body-wrapper**/

.elx-dataBig--body-wrapper {
  overflow-y: scroll;
}

.elx-dataBig--body-wrapper::-webkit-scrollbar{
  width: 7px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
}


.elx-dataBig--body-wrapper::-webkit-scrollbar-thumb{
  /*滚动条里面小方块样式*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  background: rgb(24, 60, 130);
}


.elx-dataBig--body-wrapper::-webkit-scrollbar-track {
  /*滚动条里面轨道样式*/
  -webkit-box-shadow: inset 0 0 5px rgba(21, 45, 98, 0.5);
  border-radius: 0;
  background: rgba(21, 45, 98, 0.5)
}

---

简单小表格演示

<template>
  <div class="main-layout">
    <div>
      <!--table表格-->
      <div
        class="body-title-layout"
        :class="{ 'title-right': tableDataList.length > 6 }"
      >
        <!-- 表格区域 -->
        <table class="table">
          <thead>
            <tr class="table-th">
              <th class="table-time">时间</th>
              <th class="table-name">姓名</th>
              <th class="table-equip">消费设备</th>
              <th class="table-money">消费金额</th>
            </tr>
          </thead>
        </table>
      </div>
      <div
        class="body-layout"
        :class="{ 'elx-dataBig--body-wrapper': tableDataList.length > 6 }"
      >
        <table class="table">
          <tbody>
            <tr v-for="item in tableDataList" :key="item.id" class="table-td">
              <td class="table-time">{
   
   { item.dateTime | timeFilter }}</td>
              <td class="table-name">{
   
   { item.name }}</td>
              <td class="table-equip">{
   
   { item.supplierName }}</td>
              <td class="table-money" style="margin-right: 40px">
                {
   
   { item.tradeFee }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "main",
  props: {},
  components: {},
  data() {
    return {
      tableDataList: [
        {
          dateTime: "20210603182354",
          name: "张晓晓",
          supplierName: "xx消费机",
          tradeFee: "92",
        },
        {
          dateTime: "20210602165442",
          name: "张晓晓",
          supplierName: "xx消费机",
          tradeFee: "92",
        },
        {
          dateTime: "20210602142536",
          name: "张晓晓",
          supplierName: "xx消费机",
          tradeFee: "92",
        },

        {
          dateTime: "20210602094234",
          name: "张晓晓",
          supplierName: "xx消费机",
          tradeFee: "92",
        },
        {
          dateTime: "20210602094234",
          name: "张晓晓",
          supplierName: "xx消费机",
          tradeFee: "92",
        },
        {
          dateTime: "20210602094234",
          name: "张晓晓",
          supplierName: "xx消费机",
          tradeFee: "92",
        },
        {
          dateTime: "20210602094234",
          name: "张晓晓",
          supplierName: "xx消费机",
          tradeFee: "92",
        },
      ],
    };
  },
  methods: {
    /**
     * 监听方法
     */
    /**
     * 请求数据
     */
  },
  mounted() {},
  computed: {},
  watch: {},
  filters: {},
};
</script>
<style lang="less" scoped>
.main-layout {
  width: 300px;
  .body-layout {
    height: 110px;
  }

  /**使用时用这个class即可    elx-dataBig--body-wrapper**/
  .elx-dataBig--body-wrapper {
    overflow-y: scroll;
  }
  .elx-dataBig--body-wrapper::-webkit-scrollbar {
    width: 7px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px;
  }
  .elx-dataBig--body-wrapper::-webkit-scrollbar-thumb {
    /*滚动条里面小方块样式*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    background: rgb(24, 60, 130);
  }
  .elx-dataBig--body-wrapper::-webkit-scrollbar-track {
    /*滚动条里面轨道样式*/
    -webkit-box-shadow: inset 0 0 5px rgba(21, 45, 98, 0.5);
    border-radius: 0;
    background: rgba(21, 45, 98, 0.5);
  }
}
</style>