由于公司需要一个上传图片的组件然后有了这么些个需求：

1.图片太多的时候需要滚动条滚动显示

2.点击上传时需要遮罩避免触发其他事件干扰

然而布局的时候会发现有几个难点需要克服：

3.由于我的按钮是通过相对定位配合绝对定位在底部固定的效果，在存在滚动条的情况下，会在滚动的时候按钮会随滚动条移动

4.（个人ui美化需求）想顺便再隐藏一下滚动条

 

通过网上查的部分功能实现方法，现在整理一下思路吧

必要时显示滚动条：

　　max-height + overflow: auto;

遮罩：

　　1.绝对定位+left、right、top、bottom: 0;可以遮住父元素；

　　2.绝对定位+left、top: 0;+width、height: 100%;也可以遮住父元素；

固定在底部：

　　父元素position: relative;子元素position: absolute;+子元素left\right\top\bottom: 0;可以固定在对应方向;

固定在底部+滚动条：

　　根据上面方法定位并在父级元素上直接添加滚动条样式，定位就会出问题。网上找到的方案是在外部添加一个元素，相对定位移动到外部元素上，把按钮定位在这个辅助的元素上如下图

 

<div class="helper-wrap">
  <div class="wrap1">
    <div class="inner-wrap">内容</div>
    <div class="inner-btn"></div>
  </div>
</div>

<style>
    .helper-wrap{
      position: relative;
      width: 300px;
      margin: auto;
    }
    .wrap1{
      width: 100%;
      max-height: 200px;
      overflow: auto;
    }
    .inner-wrap{
      position: relative;
      height: 1430px;
      padding: 10px;
      background-color: #096;
    }
    .inner-btn{
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 30px;
      background-color: rgba(0,0,0,.8);
    }
  </style>

所以滚动条隐藏确实有必要

 　　网上有很多方法，需要添加元素进行布局，通过有滚动条的元素margin-right: -1em;+父元素width: fit-content;overflow: hidden;可以隐藏掉子元素的滚动条

还需要注意的是：

　　由于遮罩情况下还能滚动，所以遮罩的父元素应该是内容元素或者和内容等高的其父元素且应该是可滚动元素的内部元素（定位在子元素上会使得滚动条也被遮住）

大概整理个框架：

 

具体代码如下：

<div class="helper-wrap">
    <div class="wrap1">
      <div class="inner-wrap">
        <div class="content">
          <div class="block"></div>
          <div class="block"></div>
          <div class="block"></div>
          <div class="block"></div>
        </div>
        <div class="mask"></div>
      </div>
      <div class="inner-btn"></div>
    </div>
  </div>

  <style>
    .helper-wrap{
      position: relative;
      width: fit-content;
      border: 1px solid red;
      margin: auto;
      overflow: hidden;
    }
    .wrap1{
      width: 300px;
      max-height: 600px;
      margin-right: -1em;
      overflow: auto;
    }
    .wrap1::-webkit-scrollbar {
      display: none;
    }
    .inner-wrap{
      position: relative;
    }
    .content{
      padding: 10px;
      background-color: #096;
    }
    .block{
      width: 80px;
      height: 400px;
      padding: 10px;
      margin: 30px;
      background-color: #f5f5f5;
    }
    .mask{
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      /* width: 100%;
      height: 100%; */
      background-color: rgba(0,0,0,.4);
      z-index: 8;
    }
    .inner-btn{
      position: absolute;
      bottom: -30px;
      left: 30px;
      right: 30px;
      height: 30px;
      background-color: rgba(0,0,0,.8);
      z-index: 4;
      cursor: pointer;
      transition: .3s;
    }
    .wrap1:hover .inner-btn{
      bottom: 0;
    }
    .wrap1:hover ~ .inner-btn{
      bottom: 0;
    }
  </style>

具体效果：

 

欢迎各位大佬修正补充......