滚动条挤占内容宽度、破坏布局的解决方案

小咪咪 2022-05-16 13:47 561阅读 0赞

\#问题  
当内容增多，滚动条从无到有时，它的出现挤压了内容宽度，导致原来设计好的布局被破坏。  
\#原因  
滚动条的宽度是计算到内容 content 里的。  
\#解决思路  
增加一个中间层，使得外部容器宽度保持设计宽度，内部元素排列保持不变。  
\#具体案例/方案

使用 antd 的 [Modal 弹窗][Modal]，基于其最简单的基本示例，如图：

![这里写图片描述][70]  
**希望的效果：**

*  弹窗定宽定高；
 *  一排4个，宽度、边距固定；
 *  当总共8艘航母，正好两排，整整齐齐停在泊位，带滚动条。

\*\*实际的效果： \*\*

*  当滚动条不出现，一切正常；
 *  当滚动条出现， 004 号马上被挤了下去。

![这里写图片描述][70 1]

![这里写图片描述][70 2]

**代码**  
基于 [Modal 弹窗][Modal] 最简单的基本示例  
index.js

... ...
    <Modal
              title="航空母舰"
              visible={this.state.visible}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
            >
              <div className="card">001 辽宁号</div>
              <div className="card">002 山东号</div>
              <div className="card">003 弹射型</div>
              <div className="card">004 平甲板</div>
              <div className="card">005 核动力</div>
              <div className="card">006 电磁炮</div>
              <div className="card">007 隐形化</div>
              <div className="card">008 歼星舰</div>
            </Modal>
    ... ...

index.css

... ...
    
    .ant-modal-content{
      width: 500px;
    }
    .ant-modal-body {
      display: flex;
      flex-wrap: wrap;
      padding: 10px;
      height: 190px;
      overflow-x: hidden;
      overflow-y: scroll;
    }
    
    ... ...

## 不好的解决方案 ##

查了下解决方案，有人提到加大容器宽度，然后在外层设置 `overflow: hidden` 隐藏掉超出的部分，隐藏滚动条。

试着做了下，效果如图：  
![这里写图片描述][70 3]

**代码**

.ant-modal-content{
      width: 500px;
      overflow: hidden; /* 隐藏超出部分 */
    }
    .ant-modal-body {
      display: flex;
      flex-wrap: wrap;
      padding: 10px;
      height: 170px;
      overflow-x: hidden;
      overflow-y: scroll;
      width: 517px; /* 预留出滚动条的宽度，一般是17px */
    }

### 不好的原因 ###

如此一来，一排是整整齐齐停下了4 个。  
但没了滚动条，用户很容易误认为只有这四个。  
为了好看损失了必要的功能，这是不可取的。

## 更好的解决方案 ##

想到“没有什么问题不是加一层中间层解决不了的”，于是加了一层 container `div`，如图

![这里写图片描述][70 4]

![这里写图片描述][70 5]

**代码**  
index.js

··· ···
    <Modal
              title="航空母舰"
              visible={this.state.visible}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
            >
              <div className='container'>
                 <div className="card">001 辽宁号</div>
                 <div className="card">002 山东号</div>
                 <div className="card">003 弹射型</div>
                 <div className="card">004 平甲板</div>
                 <div className="card">005 核动力</div>
                 <div className="card">006 电磁炮</div>
                 <div className="card">007 隐形化</div>
                 <div className="card">008 歼星舰</div>
              </div>
            </Modal>
    ··· ···

index.css

... ...
    
    .ant-modal-content{
      width: 500px;
    }
    .ant-modal-body {
      padding: 10px;
      height: 190px;
      overflow-x: hidden;
      overflow-y: auto;
    }
    .container {
      display: flex;
      flex-wrap: wrap;
      width: 517px;
    }
    
    ... ...

## 原因 ##

原因很简单，现在的**内-中-外**三层结构里，滚动条吃掉的是外层的内容宽度，中间层的定宽为内层 div 的排列提供了保障。

![这里写图片描述][70 6]

## 其他方案 ##

可以使用这个伪类 `::-webkit-scrollbar` ，不过只能作用于 Chrome 内核的浏览器。可以参考 [MDN 文档][MDN]。

[Modal]: https://ant.design/components/modal-cn/
[70]: /images/20220516/c25a74566d5f4e64a1f2e3ea37744f28.png
[70 1]: /images/20220516/b2deaabc282941328ccc0d18354172d1.png
[70 2]: /images/20220516/988f0f777e86455bb07de4f4afce6632.png
[70 3]: /images/20220516/18099c501db140b29a8a0a5708b5d585.png
[70 4]: /images/20220516/4fd17bb2d2fe4e0895a27044e9e109a2.png
[70 5]: /images/20220516/a66d99dd754844ada03796bb2071f77d.png
[70 6]: /images/20220516/07b11dba98ab4a7880b9cbda2b8f3f77.png
[MDN]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar#%E4%BE%8B%E5%AD%90