css滚动条隐藏/显示,不产生晃动

实现效果：内容超出div高度，出现滚动条。鼠标在div上时滚动条显示，鼠标不在div上时滚动条隐藏。

 

鼠标不在div上时：在右侧为滚动条预留10px宽度。（注：10px是自己设置的滚动条的宽度，若滚动条宽度为8，则改为8px）

鼠标移入div上后：宽度还原100%。但是overflow-y值一定是scroll，不能是auto。因为scroll一直占据一个宽度，而auto是出现滚动条才占据宽度，会出现晃动。

 

值	描述	测试
visible	不裁剪内容，可能会显示在内容框之外。	测试
hidden	裁剪内容 - 不提供滚动机制。	测试
scroll	裁剪内容 - 提供滚动机制。--无溢出时滚动条显示为灰色不可用，溢出时正常	测试
auto	如果溢出框，则应该提供滚动机制。---容易造成页面因滚动条时有时无而左右晃动	测试
no-display	如果内容不适合内容框，则删除整个框。	测试
no-content	如果内容不适合内容框，则隐藏整个内容。	测试

<div class="w100-h100-overflow_mouse">...</div>

 

.w100-h100-overflow_mouse{
  overflow-y: hidden;
  width:calc(100% - 10px);
  height: 100%;
  padding-right: 10px;
}
.w100-h100-overflow_mouse:hover {
  overflow-y: scroll;/* 这里不能写auto，否则可能会晃动 */
  width:calc(100% - 0px);
  padding-right: 0px;
}