解决子元素滚动条滑动到边缘后外层滚动条继续滑动问题

今天在用vue做后台的时候遇到一个问题，就是子元素滑动到顶部或者底部会导致页面的滚动条滑动，最后发现可以在子元素用css属性overscroll-behavior-y的contain值解决这个问题。可以兼容pc端的chrome和firefox浏览器

.el-dialog {
  height: 100%;
  margin: 0 !important;
  border-radius: 7px;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
}

简单的看了下文档，overscroll-behavior CSS 属性是 overscroll-behavior-x 和 overscroll-behavior-y 属性的合并写法, 让你可以控制浏览器过度滚动时的表现——也就是滚动到边界。

overscroll-behavior分别有三个值分别是auto，contain，none，其中文档介绍到属性设置contain这个值后，默认的滚动边界行为不变（“触底”效果或者刷新），但是临近的滚动区域不会被滚动链影响到，比如对话框后方的页面不会滚动。