Question

直到几天前，使用position:absolute;和bottom:-36px足以隐藏页面上的控件，只要鼠标悬停在播放器上，它们就会弹出。现在我可以向下滚动来查看它们。如何在保持相同的上滑效果的同时解决这个问题？

另外，还有一件事......我将控件div设置为line-height:36px，期望它的高度为36px，但实际上是38px（因为2px是可见的，因此bottom:-36px无用）。定时器和P，M和F div在顶部获得两个额外的px，搜索条将它们放在底部。这些额外的px来自哪里？

Sample

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

EDIT1：

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

给父母div一个相对位置提出另一个问题，不要问我为什么但有时我需要滚动“玩家”（好吧，你可以问），当我做控制时不要留在底部。请亲自看看：

Sample

EDIT2：

显然可以通过在控件div中用position:absolute;替换position:fixed;来轻松解决这个问题。我还在测试，以防这个小小的改变搞乱其他任何事情。

Answer 1

您可以使用CSS为overflow-y: hidden;标记分配body（禁用垂直滚动），并将bottom值更改为-38px。

＆＃13;

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

＆＃13;

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

＆＃13;

以下是 CodePen 的示例。

保持自定义视频控件不可见

1 个答案: