vue样式问题overflow-y：点击之后页面抖动，y轴出现滚动条

Dear 丶 2023-08-17 15:43 129阅读 0赞

### 情景再现 ###

完成了多选框功能，点击查询，表格中无数据显示（数据库中无数据），表格的**高度出现了变化**，导致Windows下谷歌浏览器页面出现**自动适配**，y轴就会出现一个滚动条。再次点击多选框，页面y轴就会在**出现滚动条<--->滚动条消失**之间转换，所以页面就会抖动

注意：在macOS苹果的系统下，不会出现这个问题，除非手动把浏览器页面拉到非常非常小

### 解决办法 ###

在前端页面，样式顶层，添加这个样式。如果是jsp，建议在body标签中添加。如果是vue，在App.vue中添加，如

### 关于overflow-y 属性 ###

overflow-y 属性规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内容区域的话。

提示：使用 [overflow-x][] 属性来确定对左/右边缘的裁剪。

<table> 
 <tbody> 
  <tr> 
   <th>默认值：</th> 
   <td>visible</td> 
  </tr> 
  <tr> 
   <th>继承性：</th> 
   <td>no</td> 
  </tr> 
  <tr> 
   <th>版本：</th> 
   <td>CSS3</td> 
  </tr> 
  <tr> 
   <th>JavaScript 语法：</th> 
   <td><em>object</em>.style.overflowY="scroll"</td> 
  </tr> 
 </tbody> 
</table>

## 语法 ##

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>visible</td> 
   <td>不裁剪内容，可能会显示在内容框之外。</td> 
  </tr> 
  <tr> 
   <td>hidden</td> 
   <td>裁剪内容 - 不提供滚动机制。</td> 
  </tr> 
  <tr> 
   <td>scroll</td> 
   <td>裁剪内容 - 提供滚动机制。</td> 
  </tr> 
  <tr> 
   <td>auto</td> 
   <td>如果溢出框，则应该提供滚动机制。</td> 
  </tr> 
  <tr> 
   <td>no-display</td> 
   <td>如果内容不适合内容框，则删除整个框。</td> 
  </tr> 
  <tr> 
   <td>no-content</td> 
   <td>如果内容不适合内容框，则隐藏整个内容。</td> 
  </tr> 
 </tbody> 
</table>

[overflow-x]: https://www.w3school.com.cn/cssref/pr_overflow-x.asp