如何通过类框获取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>
你需要在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>