如何在悬停时删除溢出时调整内容大小？

Question

我的网站上有溢出问题。当鼠标没有在左侧菜单上时，它看起来没问题，但当我将鼠标移到菜单上并且:hover处于活动状态时，内容（菜单是内容）稍微小一些。当:hover处于活动状态时，我不希望这种效果，菜单稍微小一些。

我想要的效果就像在Youtube上一样。如果您已登录自己的帐户，并且按下Youtube徽标旁边的菜单图标，则会出现滚动菜单。当鼠标没有在菜单上时，没有任何反应。但是当您将鼠标移到菜单上时，溢出是可见的，这不会改变内容大小。

简而言之：

1. 我有这个：



当溢出处于活动状态时，内容较小

1. 我想要的是：



当溢出处于活动状态时，内容不小于

我该怎么办？

谢谢：）

Answer 1

我的理解，虽然它可能有缺陷，但你必须已经拥有滚动条将填充在那里的空间。你没有给我们任何代码所以我必须编写它，但这就是我提出的

https://jsfiddle.net/link2twenty/bxz60j4r/

<强> HTML：

<div class="sidebar">
  <div class="container">
    <div class="profile">
      <img src="http://moss-side.yoursquaremile.co.uk/img/default-profile-pic.png" />
    </div>
    <div class="card">
      <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
      <span>Test card data</span>
    </div>
    <div class="spacer">
      <hr>
    </div>
    <div class="card">
      <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
      <span>Test card data</span>
    </div>
    <hr>
    <div class="card">
      <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
      <span>Test card data</span>
    </div>
    <hr>
    <div class="card">
      <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
      <span>Test card data</span>
    </div>
    <hr>
    <div class="card">
      <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
      <span>Test card data</span>
    </div>
  </div>
</div>

<强> CSS：

.sidebar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 400px;
  overflow: hidden;
  padding-right: 17px;
}

.sidebar:hover {
  padding-right: 20px;
  overflow-y: auto;
}

.sidebar .container {
  width: 400px;
  background: #8cc34b;
  margin-bottom: -25px;
}

.card {
  opacity: .7;
  width: 100%;
  height: 120px;
  background: #8cc34b;
}

.card span {
  position: relative;
  float: right;
  padding-right: 50px;
  top: 50%;
}

hr {
  margin-left: 120px;
  margin-right: 20px;
  border-color: darkgreen;
  opacity: .7;
}

Answer 2

您可以尝试以下操作：

.scrollable {
  border: 1px solid black;
  width: 100px; /* specify the width you like here */
  overfow: hidden;
}

.scrollable:hover {
  overfow-y: scroll;
}

nav {
  border: 1px solid grey;
  width: 80px; /* specify the width which is calculated as widthOfScrollable - widthOfScrollbar */
}

.item1, .item2 {
  height: 10px;
  width: 100%;
}

.item1 { background: red }
.item2 { background: blue }

<div class="scrollable">
  <nav>
    <li class="item1"></li>
    <li class="item2"></li>
  </nav>
</div>

边框和颜色用于显示块。

这里为右侧的滚动条保留一些空间。这里的问题是准确保留当前用户/浏览器/ OS的滚动条大小。它们都可能在滚动条宽度值方面存在差异，因此有两种方法可供选择：

1. 从此处使用此功能Getting scroll bar width using JavaScript计算滚动条的正确大小
2. 使滚动条边距足以覆盖任何操作系统上的任何情况