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

【问题标题】：content jumps when scrollbar is added on hover悬停时添加滚动条时内容跳转
【发布时间】：2018-02-23 15:40:02
【问题描述】：

在我所有的divs 中，如有必要，我会在悬停时添加scrollbar。最初，该div 的溢出设置为hidden，悬停时变为auto。

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

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

【问题讨论】：

为此您可以使用自定义滚动条。

标签： javascript html css

【解决方案1】：

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

$('.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>

【讨论】：

这可行，但它在错误的位置启动滚动条。无法使用 css 定位它。

【解决方案2】：

基于this post，滚动条通常为 17px 宽，您可以将 div 设置为更薄 17px，以便在悬停时为滚动条留出空间，同时仍保持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>

【讨论】：

【解决方案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 宽度，它就会起作用

【讨论】：

检查它，它也将文本向左移动。