html - 将自定义视频控件隐藏起来

Question

直到几天前，使用 position:absolute; 和 bottom:-36px 足以将控件隐藏在页面下方，并且它们会在鼠标移动时弹出悬停在玩家上方。现在我可以向下滚动以查看它们。如何在保持相同的向上滑动效果的同时解决此问题？

此外，还有一件事......我将控件 div 设置为 line-height:36px 期望它的高度为 36px 但实际上是 38px(使 bottom:-36px 有点没用，因为 2px 是可见的)。计时器和 P、M 和 F div 在顶部有两个额外的 px，搜索栏在底部有它们。这些额外的像素来自哪里？

Sample

任何有关如何解决这些问题和了解正在发生的事情的帮助将不胜感激。谢谢。

编辑 1:

感谢 Fahad，我设法解决了我的第一个问题。该片段在 codepen 之外不起作用，但我修复了它，将 position:relative; 添加到父 div。不过，我仍然不清楚为什么 line-height 会添加这些额外的 px。

给父 div 一个相对位置引发了另一个问题，不要问我为什么但有时我需要在“播放器”中滚动(好吧，你可以问)并且当我这样做时控件不会停留在底部。请自行查看:

Sample

编辑 2:

显然，通过将控件 div 中的 position:absolute; 替换为 position:fixed; 可以很容易地解决这个问题。我仍在测试，以防这个小改动影响其他任何事情。

Answer 1

您可以使用 CSS 将 overflow-y: hidden; 分配给您的 body 标签(以禁用垂直滚动)并更改 bottom 值到 -38px。

html,
body {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  color: #EEE;
  margin: 0;
  overflow-y: hidden;
}
#player {
  background-color: #333;
  text-align: center;
  height: 100vh;
}
#toggle {
  margin: auto;
  width: 500px;
  font-size: 24px;
  line-height: 60px;
  background-color: #B83B3B;
}
#toggle:hover + #controls {
  bottom: 0;
}
#controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -38px;
  line-height: 36px;
  background-color: #B83B3B;
  transition: bottom 0.3s ease;
}
#left {
  float: left;
}
#right {
  float: right;
}
#curTime {
  font-size: 13px;
  font-weight: bold;
  margin: 0px 8px;
  display: inline-block;
  vertical-align: middle;
}
#center {
  overflow: hidden;
}
#seekBar {
  -webkit-appearance: none;
  outline: none;
  background-color: #1F7783;
  height: 6px;
  margin: 0;
  width: 100%;
}
#seekBar::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #EEE;
  height: 12px;
  width: 12px;
  border-radius: 12px;
  cursor: pointer;
  opacity: 0.8;
}
.button {
  margin: 0px 8px;
  font-size: 24px;
  display: inline-block;
  vertical-align: middle;
}

<div id="player">
  <div id="toggle">Hover to show controls.</div>
  <div id="controls">
    <div id="left">
      <div class="button">P</div>
      <span id="curTime">0:01</span>
    </div>
    <div id="right">
      <div class="button">M</div>
      <div class="button">F</div>
    </div>
    <div id="center">
      <input type="range" id="seekBar" step="any">
    </div>
  </div>
</div>

这是关于 CodePen 的例子.