当悬停在盘旋中添加滚动条时，内容会跳跃

Question

在我的所有div s中，我在必要时在Hover上添加scrollbar。最初，溢出设置为该div的hidden，并且在悬停在auto中。

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

但是，当在悬停的盘旋中添加滚动条时，内容会向左跳。我不想一直使滚动栏都存在，我只想在悬停在Div上时添加它，并且该Div中存在溢出。

Answer 1

尝试一下。我使用了完美的螺旋。

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

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

<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>

Answer 2

基于这篇文章，滚动条通常为17px宽，您可以将DIV设置为17px较薄，使滚动栏悬停在悬停后，可以使scrollbar出现，并且仍然保持宽度div。

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

示例：

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

<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>

Answer 3

这将正常工作

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>

编辑只需在悬停时添加> 17px宽度，它将起作用