溢出的原因是什么:滚动不能按预期工作?

问题描述 投票:1回答:1

如何通过类框获取div的内容,通过添加垂直滚动根据内容展开?允许我浏览所有内容

我试图使用overflow:scroll但没有达到预期的结果。

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

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>
html css
1个回答
3
投票

你需要在heightvh中指定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>
© www.soinside.com 2019 - 2024. All rights reserved.