将鼠标悬停在div上不会触发Chrome中的溢出覆盖滚动条

c86crjj0  于 2023-06-19  发布在  Go
关注(0)|答案(1)|浏览(99)

我一直在使用溢出:overlay CSS属性,仅当鼠标悬停在Chrome中的元素上时才显示滚动条。这种技术一直工作得很好,直到最近,但突然覆盖效果不再工作。相反,显示的是普通的滚动条,它会占用空间,并导致内容在悬停时晃动。
我想知道是否还有其他人遇到过这个问题,以及最新版本的Chrome是否有任何更改,可能已经删除了对覆盖滚动条的支持。任何关于如何解决这个问题的见解或建议将不胜感激。

<div class="content">content</div>
<style>
  .content {
    overflow: hidden;
  }
  .content:hover {
    overflow: overlay;
  }
</style>

注意:我使用的是最新版本的Chrome。
预期:当鼠标悬停在元素上时,应该出现覆盖滚动条,而不会影响内容的布局。
实际:覆盖效果不起作用,显示正常的滚动条,导致内容在悬停时抖动。
提前感谢您的帮助!

6l7fqoea

6l7fqoea1#

请给予固定宽度的例子。

.content {
overflow: hidden;
width: 135px;
height: 100px;
scrollbar-gutter: stable both-edges;
  }
  .content:hover {
   
   
overflow: overlay;
  }
<body>
    
    <div class="content">content  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, voluptatem?</div>

</body>

相关问题