<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style>
ul {
overflow: hidden;
overflow-y: hidden;
}
</style>
</head>
<body>
<div class="mui-content">
<button type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>
<button type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
Item 1
</li>
<li class="mui-table-view-cell">
Item 2
</li>
<li class="mui-table-view-cell">
Item 3
</li>
<li class="mui-table-view-cell">
Item 1
</li>
<li class="mui-table-view-cell">
Item 2
</li>
<li class="mui-table-view-cell">
Item 3
</li>
<li class="mui-table-view-cell">
Item 1
</li>
<li class="mui-table-view-cell">
Item 2
</li>
<li class="mui-table-view-cell">
Item 3
</li>
<li class="mui-table-view-cell">
Item 1
</li>
<li class="mui-table-view-cell">
Item 2
</li>
<li class="mui-table-view-cell">
Item 3
</li>
</ul>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
</script>
</body>
</html>
- 发布:2017-08-18 09:49
- 更新:2017-08-18 11:18
- 阅读:1736
请问一下,底部列表高度不能写死,该怎么隐藏滚动条?这样写无效
回梦無痕 - 暂停服务
上面代码。。在电脑端测试通过。手机端不行。
我重新测试也一下,一下代码IOSAPP上测试通过:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style>
ul {
overflow: hidden;
overflow-y: hidden;
}
html, body {
height: 100%;
}
#aaa{
overflow:auto;
height: 100%;
}
#aaa::-webkit-scrollbar{width:0;height:0;display: none;}
</style>
</head>
<body>
<div id="aaa">
<div class="mui-content">
<button type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>
<button type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
Item 1
</li>
<li class="mui-table-view-cell">
Item 2
</li>
<li class="mui-table-view-cell">
Item 3
</li>
<li class="mui-table-view-cell">
Item 1
</li>
<li class="mui-table-view-cell">
Item 2
</li>
<li class="mui-table-view-cell">
Item 3
</li>
<li class="mui-table-view-cell">
Item 1
</li>
<li class="mui-table-view-cell">
Item 2
</li>
<li class="mui-table-view-cell">
Item 3
</li>
<li class="mui-table-view-cell">
Item 1
</li>
<li class="mui-table-view-cell">
Item 2
</li>
<li class="mui-table-view-cell">
Item 3
</li>
<li class="mui-table-view-cell">
Item 3
</li>
<li class="mui-table-view-cell">
Item 3
</li>
<li class="mui-table-view-cell">
Item 3
</li>
<li class="mui-table-view-cell">
Item 3
</li>
<li class="mui-table-view-cell">
Item 3
</li>
<li class="mui-table-view-cell">
Item 3
</li>
<li class="mui-table-view-cell">
Item 3
</li>
</ul>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
</script>
</body>
</html>
其实也就嵌套了一个高度100%的div,然后设置这个div的滚动条隐藏,因为直接对html和boyd设置滚动条,在手机上不起作用。
回梦無痕 - 暂停服务
这个滚动条是属于整个页面的滚动条,那个显示的滚动条不是ul的滚动条,因为页面高度超出了屏幕高度,页面滚动,就有滚动条了。
-
Salazar (作者)
请问这样该怎么隐藏呢?我这样设置也无效 html,body{
overflow: hidden;
overflow-y: hidden;
}2017-08-18 10:05
回梦無痕 - 暂停服务
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style>
ul {
overflow: hidden;
overflow-y: hidden;
}
*::-webkit-scrollbar{width:0;height:0;display: none;}
</style>
</head>
<body>
<div class="mui-content">
<button type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>
<button type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
Item 1
</li>
<li class="mui-table-view-cell">
Item 2
</li>
<li class="mui-table-view-cell">
Item 3
</li>
<li class="mui-table-view-cell">
Item 1
</li>
<li class="mui-table-view-cell">
Item 2
</li>
<li class="mui-table-view-cell">
Item 3
</li>
<li class="mui-table-view-cell">
Item 1
</li>
<li class="mui-table-view-cell">
Item 2
</li>
<li class="mui-table-view-cell">
Item 3
</li>
<li class="mui-table-view-cell">
Item 1
</li>
<li class="mui-table-view-cell">
Item 2
</li>
<li class="mui-table-view-cell">
Item 3
</li>
<li class="mui-table-view-cell">
Item 3
</li>
<li class="mui-table-view-cell">
Item 3
</li>
<li class="mui-table-view-cell">
Item 3
</li>
<li class="mui-table-view-cell">
Item 3
</li>
<li class="mui-table-view-cell">
Item 3
</li>
<li class="mui-table-view-cell">
Item 3
</li>
<li class="mui-table-view-cell">
Item 3
</li>
</ul>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
</script>
</body>
</html>
测试通过