我在使用响应式菜单时遇到问题。我正在尝试在屏幕更改上创建水平滚动菜单(响应)。
我需要向右滚动条,没有那些Scrollbars。有没有办法做到这一点?
<div class="menu">
<nav class="infobar">
<div class="container">
<ul class="nav navbar-left">
<div class="col-min">
<p>Example</p>
</div>
<div class="col-min">
<p>Example</p>
</div>
<div class="col-min">
<p>Example</p>
</div>
<div class="col-min">
<p>Example</p>
</div>
<div class="col-min">
<p>Example</p>
</div>
<div class="col-min">
<p>Example</p>
</div>
</ul>
</div>
</nav>
</div>
MAIN CSS
.infobar {
width: 100%;
background: #f7f7f7;
height: 80px;
border-top: 1px solid #ededed;
border-bottom: 1px solid #ededed;
border-radius: 0;
.col-min {
min-width: 10px;
height: 80px;
background: none;
border-left: 1px solid #ededed;
border-right: 1px solid #ededed;
position: relative;
margin-left: -1px;
top: -1px;
left: 1px;
float: left;
}
MOBILE CSS
.infobar {
min-width:100%;
overflow-x:scroll;
overflow-y:hide;
}
.menu .nav {
margin-left: -5px;
min-width: 100%;
}
答案 0 :(得分:1)
使用完美滚动自动隐藏滚动条和显示:flex以获得更好的体验。
function my_scripts_enqueue() {
wp_register_script( 'bootstrap-js', '://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery'), NULL, true );
wp_register_style( 'bootstrap-css', '://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', false, NULL, 'all' );
wp_enqueue_script( 'bootstrap-js' );
wp_enqueue_style( 'bootstrap-css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );
我进行了小型重构playcode.io/8
答案 1 :(得分:0)
使用
overflow-y: hidden
而不是
overflow-y: hide
并且对于滚动条的样式化,您可以使用以下类:
::-webkit-scrollbar {}
::-webkit-scrollbar-button {}
::-webkit-scrollbar-track {}
::-webkit-scrollbar-track-piece {}
::-webkit-scrollbar-thumb {}
::-webkit-scrollbar-corner {}
::-webkit-resizer {}
更多信息here