消除DIV元素中的overflow-y跳转

Question

将div元素固定在我的网页旁边，其中包含多年的内容。它默认为overflow-y: hidden，然后:hover，overflow-y: auto。

当我将鼠标悬停在元素上时，所有内容都会向左移动17px（滚动条的宽度），因为它位于中心位置。

我已经找到了解决方案并在The Stack上找到了this，但这些解决方案仅适用于涉及整个窗口的问题。

下面发布的CSS，相关的HTML只有DIV容器和.year元素但是如果你想要它我也可以把它扔到这里。 Pic比较没有正确居中，但仍然显示问题。

＆＃13;

＆＃13;

.sideBar {
  background-color: #ff9900;
  height: 150px;
  width: 200px;
  overflow-y: hidden;
}
.sideBar:hover {
  overflow-y: auto;
}
.year, .h2year {
  text-align: center;
  margin: 1em 0;
}
.year:hover {
  font-weight: bold;
}

＆＃13;

<div class="sideBar" id="yearsBar">
  <div>
    <h2 class="h2year">Years</h2>
    <p class="year" id="2015">2015</p>
    <p class="year" id="2014">2014</p>
    <p class="year" id="2013">2013</p>
    <p class="year" id="2012">2012</p>
    <p class="year" id="2011">2011</p>
    <p class="year" id="2010">2010</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用内部包装器（您已经拥有div）。然后，

• 将所需高度设置为外部包装，将所需宽度设置为内部包装。
• 将外包装器显示为内联块，以使其缩小到其内容的大小。
• 隐藏外包装上的溢出。在overflow-y: scroll使用:hover。

#outer-wrapper {
  height: 150px;
  overflow: hidden;
  display: inline-block;
}
#outer-wrapper:hover {
  overflow-y: scroll;
}
#inner-wrapperv {
  width: 200px;
}

.sideBar {
  background-color: #ff9900;
  height: 150px;
  overflow: hidden;
  display: inline-block;
}
.sideBar:hover {
  overflow-y: scroll;
}
.sideBar > div {
  width: 200px;
}
.year, .h2year {
  text-align: center;
  margin: 1em 0;
}
.year:hover {
  font-weight: bold;
}

<div class="sideBar" id="yearsBar">
  <div>
    <h2 class="h2year">Years</h2>
    <p class="year" id="2015">2015</p>
    <p class="year" id="2014">2014</p>
    <p class="year" id="2013">2013</p>
    <p class="year" id="2012">2012</p>
    <p class="year" id="2011">2011</p>
    <p class="year" id="2010">2010</p>
  </div>
</div>

至少，它适用于Firefox，Chrome和IE8。