我有一个自定义滚动条,在chrome上看起来不错,但是我的问题是有可能将自定义滚动条放在像在移动设备上那样绝对定位,以便不会破坏菜单样式
是否有任何方法只能使用CSS来解决?
html,
body{margin:0; padding:0; height:100%}
/*Scrollbar style*/
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
/*Menu Style*/
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #e0e3e4;
position: fixed;
width: 200px;
height: 100%;
box-shadow: inset -1px 0 0 rgba(0,0,0,0.2);
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
background-color: #4f5b69;
}
.nav-side-menu li {
padding-left: 10px;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2);
}
.nav-side-menu li a {
text-decoration: none;
color: #000;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
box-shadow: inset 3px -1px 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
background-color: #d3d7d8;
transition: all 0.3s ease;
}
.nav-side-menu li.active {
box-shadow: inset 3px 0 0 red,inset 0 -1px 0 rgba(0,0,0,0.2);
background-color: #f3f6f7;
}
.content-area{
height: 100%;
margin-left: 200px;
background-color: #f3f6f7;
}
<!DOCTYPE html>
<html>
<head></head>
<div class="nav-side-menu">
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse">
<li class=""><a class="menu_report" href="#">Test</a></li>
<li class="active"><a class="menu_report" href="#">Test</a></li>
<li class=""><a class="menu_report" href="#">Test</a></li>
<li class=""><a class="menu_report" href="#">Test</a></li>
<li class=""><a class="menu_report" href="#">Test</a></li>
<li class=""><a class="menu_report" href="#">Test</a></li>
<li class=""><a class="menu_report" href="#">Test</a></li>
</ul>
</div>
</div>
<div class="content-area"></div>
</html>
html,
body {
margin: 0;
padding: 0;
height: 100%
}
/*Scrollbar style*/
::-webkit-scrollbar {
width: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
/*Menu Style*/
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #e0e3e4;
position: fixed;
width: 200px;
height: 100%;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.2);
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
background-color: #4f5b69;
}
.nav-side-menu li {
padding-left: 10px;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
border-right: 1px solid silver; /* <<<<<<<< Border Here <<<<<<<< */
}
.nav-side-menu li a {
text-decoration: none;
color: #000;
}
.nav-side-menu li:hover {
box-shadow: inset 3px -1px 0 rgba(0, 0, 0, 0.2), inset -1px 0 0 rgba(0, 0, 0, 0.2);
background-color: #d3d7d8;
transition: all 0.3s ease;
}
.nav-side-menu li.active {
box-shadow: inset 3px 0 0 red, inset 0 -1px 0 rgba(0, 0, 0, 0.2);
background-color: #f3f6f7;
}
.content-area {
height: 100%;
margin-left: 200px;
background-color: #f3f6f7;
}
<div class="nav-side-menu">
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse">
<li class=""><a class="menu_report" href="#">Test</a></li>
<li class="active"><a class="menu_report" href="#">Test</a></li>
<li class=""><a class="menu_report" href="#">Test</a></li>
<li class=""><a class="menu_report" href="#">Test</a></li>
<li class=""><a class="menu_report" href="#">Test</a></li>
<li class=""><a class="menu_report" href="#">Test</a></li>
<li class=""><a class="menu_report" href="#">Test</a></li>
</ul>
</div>
</div>
<div class="content-area"></div>
[此外,如果这是您要查找的内容,则可以将overflow-y: scroll;
添加到.nav-side-menu
以使滚动条的空间始终存在。