侧边滚动条出现导致内容区原本元素被压缩的问题

385 阅读1分钟

方案一

  • 有兼容性问题
height: 540px;
overflow-y: auto;
overflow-y: overlay; //写后面 如果浏览器不支持 至少上面auto能起作用

方案二(element的方案)

image.png

  1. 设置overflow:auto后,将滚动条伪元素宽度设为0,此时可以滚动,且看不到滚动条
  2. 通过监听滚动事件,模拟出来一个滚动条(该滚动条为absolute定位) image.png
.el-scrollbar__bar {
    position: absolute;
    right: 2px;
    bottom: 2px;
    z-index: 1;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 120ms ease-out;
}
//autocomplate组件内使用该自定义滚动条
import ElScrollbar from 'element-ui/packages/scrollbar';
components: { ElScrollbar },
<el-scrollbar
    tag="ul"
    wrap-class="el-autocomplete-suggestion__wrap"
    view-class="el-autocomplete-suggestion__list">
    <li v-if="!parent.hideLoading && parent.loading">
        <i class="el-icon-loading"></i>
    </li>
    <slot v-else></slot>
</el-scrollbar>