编辑,我添加了溢出-y:自动;滑动并滑动,然后打开侧边栏的滑动按钮就会消失...
我的应用程序中有一个类似于此设置的边栏,但是当y中发生溢出时,很难使内容滚动。
如您所见,由于您无法滚动到该内容,因此我看到的内容不可见。任何帮助将不胜感激!
jQuery(function($) {
$("#side").click(function() {
$('#slidable').toggleClass("open");
});
})
#side {
position:absolute;
right:100%;
width: 50px;
height: 50px;
z-index: 1000000;
color:black;
}
#slidable {
position: fixed;
top:0;
height: 100vh;
background: black;
width: 200px;
left: 100%;
transition: 0.4s;
z-index: 1000000;
color:black;
text-align:center;
font-size:25px;
font-weight: 300;
color:white;
}
#slidable.open{
left: calc(100% - 200px);
}
.fa {
font-size:30px!;
margin-top:25px;
color:black;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slidable" class="slidable">
<div id="side" class="side icon">
<i class="fa fa-bars"></i>
</div>
<div>
<p>Sidebar</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content that you shouldn't be able to see without scrolling
</div>
</div>
<div id="content" class="content">
<p>test here</p>
</div>
答案 0 :(得分:0)
您可以通过使用当前的CSS和标记来实现滚动,方法是在应该滚动的内容中添加一个类,然后为该类height: 100%; overflow: auto;
赋值。您可以在下面的代码段中看到它的运行情况。
jQuery(function($) {
$("#side").click(function() {
$('#slidable').toggleClass("open");
});
})
#side {
position:absolute;
right:100%;
width: 50px;
height: 50px;
z-index: 1000000;
color:black;
}
#slidable {
position: fixed;
top:0;
height: 100vh;
background: black;
width: 200px;
left: 100%;
transition: 0.4s;
z-index: 1000000;
color:black;
text-align:center;
font-size:25px;
font-weight: 300;
color:white;
}
#slidable.open{
left: calc(100% - 200px);
}
.fa {
font-size:30px!;
margin-top:25px;
color:black;
}
.scrollableContent{
height: 100%;
overflow: auto;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slidable" class="slidable">
<div id="side" class="side icon">
<i class="fa fa-bars"></i>
</div>
<div class="scrollableContent">
<p>Sidebar</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content that you shouldn't be able to see without scrolling
</div>
</div>
<div id="content" class="content">
<p>test here</p>
</div>