Salazar
Salazar
  • 发布:2017-08-18 09:49
  • 更新:2017-08-18 11:18
  • 阅读:1720

请问一下,底部列表高度不能写死,该怎么隐藏滚动条?这样写无效

分类:HBuilder

<!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 负责人:无 分享
已邀请:
回梦無痕

回梦無痕 - 暂停服务

上面代码。。在电脑端测试通过。手机端不行。
我重新测试也一下,一下代码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

  • 回梦無痕

    回复 Salazar:你是想隐藏,而又能滚动?

    2017-08-18 10:09

  • 回梦無痕

    回复 Salazar:.element::-webkit-scrollbar {display:none}

    2017-08-18 10:13

  • Salazar (作者)

    回复 回梦無痕:是想要隐藏还能滚动,试过你给的这个方法不行呀,是直接放到CSS里面吧?

    2017-08-18 10:15

  • 回梦無痕

    回复 Salazar:是css的,.element要替换成你要设置的元素

    2017-08-18 10:20

  • Salazar (作者)

    我试过了,还是不行呀,就是改动的我发的那些代码

    2017-08-18 10:23

回梦無痕

回梦無痕 - 暂停服务

*::-webkit-scrollbar{width:0;height:0;display: none;}

这个复制到css里

  • Salazar (作者)

    真的不行,你可以直接复制我上面发的代码跑到HBuilder试试,难道是我的手机问题?

    2017-08-18 10:41

回梦無痕

回梦無痕 - 暂停服务

<!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>

测试通过

  • Salazar (作者)

    请问你是跑在什么设备上?我直接复制你的代码到HB,运行在模拟器和手机上都不能隐藏滚动条

    2017-08-18 10:57

ForOneNight

ForOneNight

可以使用区域滚动啊

  • Salazar (作者)

    没试过,大致怎么弄?

    2017-08-18 11:21

该问题目前已经被锁定, 无法添加新回复