滚动具有可滚动子卷内容的父div

Question

我有一个父和子div，都是可滚动的。父div具有固定的高度。子div具有动态高度，根据其内容可滚动。

当子元素有很长的内容时，如何实现无缝控制？问题是，如果父滚动位于最上面，则子元素的滚动不能进一步向下滚动，除非鼠标移动一点，将焦点放在父元素上，以便滚动继续。

更新

下面的回答没有考虑到对于某些用例，子元素不必是父元素的100%宽度。

代码在下面。

​

      .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执行以下操作。

，其子元素的宽度为父元素的100% .

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

​