问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

移动端h5页面，滚动时的滚动条是否可以去掉

头像
tkgkn
    26422941

    图片描述

    请问有没有办法可以去掉这个滚动条的？

    <!DOCTYPE html>
<html>

<head>
    <title>测试</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
    <style>
    .box {
        height: 14px;
        width: 100%;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }
    ul{
        height: 14px;
        width: 500px;
        padding: 0;
        margin: 0;
    }
    .f{
        padding: 0;
        margin: 0;
        float: left;
        height: 14px;
        font-size: 12px;
        line-height: 14px;
        width: 100px;
    }
    </style>

    <body>
        <div class="box">
            <ul>
                <li class="f">你的名字</li>
                <li class="f">你的名字</li>
                <li class="f">你的名字</li>
                <li class="f">你的名字</li>
                <li class="f">你的名字</li>
            </ul>
        </div>
    </body>

</html>

    采纳后改写的最后完整的代码：

    <!DOCTYPE html>
<html>

<head>
    <title>测试</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
    <style>
    body,
    html,
    ul,
    li {
        padding: 0;
        margin: 0;
    }
    
    .box {
        width: 100%;
        height: 30px;
        overflow: hidden;
    }

    .wrap,.content{
        height: 40px;
    }
    
    .wrap {
        width: 100%;
        overflow: auto;
        position: relative;
        overflow: auto;
        overflow-y: hidden;
    }

    .content{
        width: 500px;
    }

    .f{
        width: 100px;
        float: left;
    }
    </style>

    <body>
        <div class="box">
            <div class="wrap">
                <ul class="content">
                    <li class="f">你的名字</li>
                    <li class="f">你的名字</li>
                    <li class="f">你的名字</li>
                    <li class="f">你的名字</li>
                    <li class="f">你的名字</li>
                </ul>
            </div>
        </div>
    </body>

</html>
    javascripthtml5htmlcss
    阅读 17.3k
    8 个回答
    得票最新
    头像
    toBeTheLight
      16.6k41634
      ✓ 已被采纳

      1.overflow:hidden;然后touchmove事件自己写滚动效果。

      2.或者再包一层wrap,设置overflow:hidden。ul放在wrap里比wrap稍高，但是滚动条藏在wrap的hidden部分里。

      头像
      linong
        29.2k1266135

        1.网上找一个插件，恩可以说是最简单的方法

        2.就是楼上说的那种，内部高，然后隐藏掉滚动条

        头像
        Raymond
          4.3k43063

          想要使得移动端不出现滚动条， 有2个要素 ：
          一个是设置body显式的拥有scroll :

          body {
  height: 100vh;
  overflow: hidden;
  overflow-y: scroll;
}

          二个是设置scroll为none ：

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

          两者缺一不可 ！

          ✿ 设置 body 的 overflow: hidden; 会导致用户跳转页面时， 浏览器不再记录上一页所在位置， 最后效果和这个一样 ： https://blog.csdn.net/wsln_12...

          ✿ 如果还是有问题 , 试着删除 \-webkit-overflow\-scrolling: touch;

          参考资料 :

          头像
          sense
            201

            使用overflow: hidden;将超出显示区域的地方隐藏，就不会出现滚动条了

            头像
            安于现状i
              8791410

              用插件swiper.js

              头像
              qfkobe24
                13111219

                /隐藏横向和纵向滚动条/
                ::-webkit-scrollbar {
                width: 0em;
                }
                ::-webkit-scrollbar:horizontal {
                height: 0em;
                }

                头像
                前端老李
                  40018
                  ::-webkit-scrollbar:{display:none; width:0; height: 0;}
                  头像
                  dailyvuejs
                    1.6k12
                    撰写回答
                    你尚未登录，登录后可以
                    • 和开发者交流问题的细节
                    • 关注并接收问题和回答的更新提醒
                    • 参与内容的编辑和改进，让解决方法与时俱进
                    推荐问题