zoukankan      html  css  js  c++  java
  • 移动端-纯css隐藏滚动条解决方案

    网上大部分方案如下,即给出现滚动条的元素 ::-webkit-scrollbar 添加 display: none;

    html,body {
       100%;
      height: 100%;
      overflow-y: scroll;
    }
    
    body::-webkit-scrollbar {
      display: none;  // 重点
    }
    

    但这个方法出现了问题,ios上的滑动效果很不流畅,不利于用户体验,Android上是ok的;
    此时可以加上这样一句css代码(-webkit-overflow-scrolling: touch;),如下:

    .container{
      //解决ios滑动不流畅
      -webkit-overflow-scrolling: touch;
    }
    

    因为我没有采用上边的方案,所以并不确定是否奏效,仅作此记录。
    以下为我所采用的方案:


    垂直方向滚动条

    .navCon::-webkit-scrollbar {
       0;
    }
    

    水平方向滚动条

    .navCon::-webkit-scrollbar {
      height: 0;
    }
    
  • 相关阅读:
    MongoDB
    Flask-Migrate
    Flask-Script
    Flask-SQLAlchemy
    SQLAlchemy
    DBUtils
    依存句法分析
    如何将本地的jar包上传到maven本地仓库中
    git使用手册
    中文网页编解码问题
  • 原文地址:https://www.cnblogs.com/ZerlinM/p/13722413.html
Copyright © 2011-2022 走看看