div实现scroll（vue版本）

废话不多说上代码

template模块

注释：dv-border-box-10是DataV（大数据看板组件库）的组件

<template>
  <div>
    <dv-border-box-10
      style="height: 467px; width: 487px"
      class="dv-contain_caozuo"
    >
      <div class="caozuo">
        <i class="iconfont icon-caozuojilu"></i><span>操作记录</span>
      </div>
      <div class="record_content">
        <div class="open">
          <i class="iconfont icon-circle open_icon"></i>
          <span>用户张小花打开设备操作成功</span>
          <span>2022-09-22 10:00:03</span>
        </div>
        <div class="close">
          <i class="iconfont icon-circle close_icon"></i>
          <span>用户张小花关闭设备操作成功</span>
          <span>2022-09-22 10:00:03</span>
        </div>
        <div class="open">
          <i class="iconfont icon-circle open_icon"></i>
          <span>用户张小花打开设备操作成功</span>
          <span>2022-09-22 10:00:03</span>
        </div>
        <div class="close">
          <i class="iconfont icon-circle close_icon"></i>
          <span>用户张小花关闭设备操作成功</span>
          <span>2022-09-22 10:00:03</span>
        </div>
        <div class="open">
          <i class="iconfont icon-circle open_icon"></i>
          <span>用户张小花打开设备操作成功</span>
          <span>2022-09-22 10:00:03</span>
        </div>
        <div class="close">
          <i class="iconfont icon-circle close_icon"></i>
          <span>用户张小花关闭设备操作成功</span>
          <span>2022-09-22 10:00:03</span>
        </div>
        <div class="open">
          <i class="iconfont icon-circle open_icon"></i>
          <span>用户张小花打开设备操作成功</span>
          <span>2022-09-22 10:00:03</span>
        </div>
        <div class="close">
          <i class="iconfont icon-circle close_icon"></i>
          <span>用户张小花关闭设备操作成功</span>
          <span>2022-09-22 10:00:03</span>
        </div>
        <div class="open">
          <i class="iconfont icon-circle open_icon"></i>
          <span>用户张小花打开设备操作成功</span>
          <span>2022-09-22 10:00:03</span>
        </div>
        <div class="close">
          <i class="iconfont icon-circle close_icon"></i>
          <span>用户张小花关闭设备操作成功</span>
          <span>2022-09-22 10:00:03</span>
        </div>
      </div>
    </dv-border-box-10>
   </template>
  </div>

Css模块

<style lang="scss" scoped>
.caozuo {
  padding: 20px;
  span {
    padding: 5px;
    font-size: 20px;
    color: white;
    font-weight: 700;
  }

  .icon-caozuojilu {
    font-size: 25px;
    color: #5cd9e8;
  }
}

@mixin font {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 0px;
  color: rgba(255, 255, 255, 1);
  text-align: left;
  vertical-align: top;
  padding: 15px;
  height: 21px;
  line-height: 21px;
}

@mixin box {
  padding: 20px;
  height: 25px;
  line-height: 25px;
}

.open {
  @include box();

  span {
    @include font();
  }

  .open_icon {
    font-size: 20px;
    color: rgba(27, 158, 79, 1);
  }
}

.close {
  @include box();

  span {
    @include font();
  }

  .close_icon {
    font-size: 20px;
    color: rgba(212, 48, 48, 1);
  }
}
.record_content{
    height: 80%;
    //设定y轴有srcoll效果
   overflow-y: scroll;
}
/* 自定义滚动条样式开始 */
::-webkit-scrollbar {
  width: 5px; /*滚动条宽度*/
  height: 18px; /*滚动条高度*/
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: 0px 1px 3px #071e4a inset; /*滚动条的背景区域的内阴影*/
  border-radius: 10px; /*滚动条的背景区域的圆角*/
  background-color: #071e4a; /*滚动条的背景颜色*/
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  box-shadow: 0px 1px 3px #00a0e9 inset; /*滚动条的内阴影*/
  border-radius: 10px; /*滚动条的圆角*/
  background-color: #00a0e9; /*滚动条的背景颜色*/
}
</style>

效果图