將自定義視頻控件保持在視線範圍外

Question

直到幾天前，使用position:absolute;和bottom:-36px就足以隱藏頁面上的控件，只要將鼠標懸停在播放器上就會彈出。現在我可以向下滾動查看它們。我怎樣才能解決這個問題，同時保持相同的滑動效果？

此外，還有一件事...我設置的控制div與line-height:36px期待它是36px的高度，但實際上是38px（使bottom:-36px種無用，因爲2px是可見的）。計時器和P，M和F divs在頂部獲得兩個額外的px，而搜索欄獲取它們在底部。這些額外的PX來自哪裏？

Sample

就如何解決這些問題，並瞭解發生了什麼事情，將不勝感激任何幫助。謝謝。

EDIT1：

由於法赫德我設法解決我的第一個問題。這段代碼並沒有在codepen之外工作，但我修正了它向父div添加position:relative;。不過，我仍不清楚爲什麼line-height增加了這些額外的像素。

給父母親一個相對的位置提出了另一個問題，不要問我爲什麼，但有時我需要滾動「玩家」（嗯，你可以問），當我做的控制不留在底端。請查看一下：

Sample

EDIT2：

顯然可以很容易地通過與控制DIV position:fixed;更換position:absolute;解決。我仍然在測試，以防萬一這個小小的變化與其他任何東西混淆。

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的例子。