1、项目需求中,需要dialog弹框内容超出后,显示滚动条,如下图所示:

2、采取方案：

2.1 dialog中嵌套div，给div设置高度，并且overflow属性为auto，布局如下图：

3、代码样式代码片段

3.1sass或less写法

 .sketch_content {
// 必须有高度 overflow 为自动
    overflow: auto;
    height: 434px;
    border-top: 1px solid #eff1f4;
    border-bottom: 1px solid #eff1f4;
    padding: 0px 30px 11px 27px;

// 滚动条的样式,宽高分别对应横竖滚动条的尺寸
    &::-webkit-scrollbar {
      width: 3px;
    }

// 滚动条里面默认的小方块,自定义样式
    &::-webkit-scrollbar-thumb {
      background: #8798AF;
      border-radius: 2px;
    }

// 滚动条里面的轨道
    &::-webkit-scrollbar-track {
      background: transparent;
    }
}

3.2 原生写法

   .sketch_content {
// 必须有高度 overflow 为自动
    overflow: auto;
    height: 434px;
    border-top: 1px solid #eff1f4;
    border-bottom: 1px solid #eff1f4;
    padding: 0px 30px 11px 27px;
    }

// 滚动条的样式,宽高分别对应横竖滚动条的尺寸
    .sketch_content::-webkit-scrollbar {
      width: 3px;
    }

// 滚动条里面默认的小方块,自定义样式
    .sketch_content::-webkit-scrollbar-thumb {
      background: #8798AF;
      border-radius: 2px;
    }

// 滚动条里面的轨道
    .sketch_content::-webkit-scrollbar-track {
      background: transparent;
    }