Question

如何获取带有class框的div的内容，并通过添加垂直滚动条根据内容进行扩展？让我可以浏览所有内容

我试图使用溢出：滚动但没有达到预期的结果。

请查看反映我工作情况的示例

function toggle() {
    const box = document.querySelector('.box');

    box.style.left = box.style.left === '0px' ? '-400px' : '0px';
}

.box {
    background: #FFF;
    border-right: 1px solid #DDD;
    position: fixed;
    overflow: scroll;
    top: 0;
    left: -400px;
    width: 400px;
    min-height: 100%;
    z-index: 1000000;
    transition: left .4s;
}

div.right {
    text-align: right;
}

details {
    margin: 20px;
}

<div class="right">
        <a href="#" onclick="toggle()">Toggle</a>
</div>
<div class="box">
    <div class="panel-body">
        <details>
            <summary>text1</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus accusantium.
            </p>
        </details>

        <details>
            <summary>text2</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text3</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text3</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text4</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text5</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text6</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text7</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>
    </div>
</div>

Answer 1

您需要在height或vh中指定px

function toggle() {
    const box = document.querySelector('.box');

    box.style.left = box.style.left === '0px' ? '-400px' : '0px';
}

.box {
    background: #FFF;
    border-right: 1px solid #DDD;
    position: fixed;
    top: 0;
    left: -400px;
    width: 400px;
    min-height: 100%;
    max-height:100vh;
    z-index: 1000000;
    transition: left .4s;
    overflow: scroll;
}



div.right {
    text-align: right;
}

details {
    margin: 20px;
}

<div class="right">
        <a href="#" onclick="toggle()">Toggle</a>
</div>
<div class="box">
    <div class="panel-body">
        <details>
            <summary>text1</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus accusantium.
            </p>
        </details>

        <details>
            <summary>text2</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text3</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text3</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text4</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text5</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text6</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text7</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>
    </div>
</div>

溢出的原因是什么：滚动无法按预期工作？

1 个答案: