消除 DIV 元素中的溢出-y 跳转答案

【问题标题】：Eliminating overflow-y jump in DIV element消除 DIV 元素中的溢出-y 跳转
【发布时间】：2015-07-14 02:21:25
【问题描述】：

将div 元素固定在我的网页一侧，其中包含很多年。它有默认的overflow-y: hidden，然后是:hover，overflow-y: auto。

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

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

CSS 贴在下面，相关的 HTML 只有 DIV 容器和 .year 元素，但如果你想要它，我也可以把它放在这里。图片比较未正确居中，但仍显示问题。

.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;
}

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

【问题讨论】：

你能把你的 HTML 添加到代码 sn-p 中吗？否则当你运行它时什么都不会显示。
HTML 包括在内，我的错。忘记了。

标签： html css

【解决方案1】：

您可以使用内部包装器（您已经有一个div）。那么，

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

#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 上运行。

【讨论】：

很棒。谢谢