Question

在我的所有div中，如果需要，我会在悬停时添加scrollbar。最初，hidden的溢出设置为div，并且在悬停时它会变为auto。

div{
  overflow-y: hidden;
}
div:hover{
  overflow-y: auto;
}

但是当悬停时添加滚动条时，内容会跳转到左侧。我不想让滚动条一直存在，我只想在我们将鼠标悬停在div上时添加它并且该div中存在溢出。

Answer 1

这样可以正常使用

div{
 height:100px;
 border:1px solid black;
 overflow:hidden;
 width:183px;
 }
 
 div:hover{
 overflow:auto;
 width:200px;
 }

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare bibendum varius. In tempor et neque a luctus. Integer vel diam sed sapien lacinia tincidunt. Sed lobortis rhoncus velit, at molestie sem varius id. Sed vel leo in neque sollicitudin lacinia. Mauris a ultrices enim. Aliquam sollicitudin tempor neque, vitae varius felis lobortis ac. Vestibulum et ultrices augue. Proin eros magna, dapibus et orci sit amet, tempus imperdiet risus. Etiam ac nisi in mi aliquet blandit. Aliquam erat volutpat. Duis iaculis neque justo, quis commodo magna pharetra ut.
</div>

修改只需在悬停时添加＆gt; 17px宽度，它就可以正常工作

Answer 2

试试这个。我使用过perfect-scrollbar。

＆＃13;

$('.perfectscroll').perfectScrollbar();

＆＃13;

div.perfectscroll{
   height:100px;
   border:1px solid black;
   overflow:hidden;
   width:50%;
   position:relative;
 }

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.10/css/perfect-scrollbar.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.10/js/perfect-scrollbar.jquery.js"></script>

<div class="perfectscroll">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare bibendum varius. In tempor et neque a luctus. Integer vel diam sed sapien lacinia tincidunt. Sed lobortis rhoncus velit, at molestie sem varius id. Sed vel leo in neque sollicitudin lacinia. Mauris a ultrices enim. Aliquam sollicitudin tempor neque, vitae varius felis lobortis ac. Vestibulum et ultrices augue. Proin eros magna, dapibus et orci sit amet, tempus imperdiet risus. Etiam ac nisi in mi aliquet blandit. Aliquam erat volutpat. Duis iaculis neque justo, quis commodo magna pharetra ut.
</div>

＆＃13;

Answer 3

基于this post，其中滚动条的宽度通常为17px，您可以将div设置为17px更薄，一旦悬停在滚动条上就可以显示空间，并且仍然保持{{1}的宽度}。

div

举例：

＆＃13;

div{
  overflow-y: hidden;
  width: calc(100% - 17px)
}
div:hover{
  overflow-y: auto;
  width: 100%
}

＆＃13;

div{
  height: 100px;
  border: 1px solid black;
  overflow: hidden;
  width: calc(50% - 17px);
}

div:hover {
  overflow: auto;
  width: 50%
}

＆＃13;

在悬停时添加滚动条时内容跳转

3 个答案: