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

滚动条宽度

#问题

当内容增多，滚动条从无到有时，它的出现挤压了内容宽度，导致原来设计好的布局被破坏。

#原因

滚动条的宽度是计算到内容 content 里的。

#解决思路

增加一个中间层，使得外部容器宽度保持设计宽度，内部元素排列保持不变。

#具体案例/方案

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

这里写图片描述

希望的效果：

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

**实际的效果： **

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

这里写图片描述

代码

基于 Modal 弹窗最简单的基本示例

index.js

... ...
<Modal
          title="航空母舰"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p className="card">001 辽宁号</p>
          <p className="card">002 山东号</p>
          <p className="card">003 弹射型</p>
          <p className="card">004 平甲板</p>
          <p className="card">005 核动力</p>
          <p className="card">006 电磁炮</p>
          <p className="card">007 隐形化</p>
          <p className="card">008 歼星舰</p>
        </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 隐藏掉超出的部分，隐藏滚动条。

试着做了下，效果如图：

这里写图片描述

代码

.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 p，如图

这里写图片描述

代码

index.js

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

... ...

原因

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

这里写图片描述

其他方案

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

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