滾動具有可滾動內容的可滾動子元素的父 div

Question

我有一個可滾動的父子 div。 父 div 具有固定的高度。 子 div 具有動態高度，並且可以根據其內容滾動。

當子元素的內容很長時，如何實現無縫控制？ 問題是，如果父滾動條位於最頂部，則子元素的滾動條無法進一步向下滾動，除非鼠標移動一點以將焦點放在父級滾動條上以繼續滾動。

代碼如下。

 .outer { width: 400px; background-color: antiquewhite; height: 400px; overflow-y: scroll; } h2 { margin-bottom: 500px; }.inner { height: 800px; width: 80%; overflow-y: scroll; background-color: aquamarine; }

 <div class="outer"> <div class="inner"> <h2>sddssd</h2> <h2>sddssd</h2> <h2>sddssd</h2> <h2>sddssd</h2> </div> </div>

Answer 1

一種解決方案（如果適合您的用例）是使用 CSS 執行以下操作。

  .outer {
        width: 400px;
        background-color: antiquewhite;
        height: auto;
        overflow-y: hidden;
    }

    h2 {
        margin-bottom: 500px;
    }

    .inner {
       max-height: 400px;
       width: 100%;
       overflow-y: auto; 
       background-color: aquamarine;    
    }

注意外部元素的變化。

height: auto;
overflow-y: hidden;

以及內在元素的變化

       max-height: 400px;
       width: 100%;
       overflow-y: auto;

結果附上：

不過，我希望看到更多解決方案。

 .outer { width: 400px; background-color: antiquewhite; height: auto; overflow-y: hidden; } h2 { margin-bottom: 500px; }.inner { max-height: 400px; width: 100%; overflow-y: auto; background-color: aquamarine; }

 <div class="outer"> <div class="inner"> <h2>sddssd</h2> <h2>sddssd</h2> <h2>sddssd</h2> <h2>sddssd</h2> </div> </div>