纯css隐藏移动端滚动条解决方案(ios上流畅滑动)

html代码展示(直接复制代码保存至本地文件运行即可):

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>移动端隐藏滚动条解决方案</title><style type="text/css">* {padding: 0;margin: 0;}.container {height: 50px;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.nav {height: 100%;overflow-x: scroll;overflow-y: hidden;background-color: #999;}.con {width: 640px;height: 100%;display: flex;align-items: center;}.con>li {text-align: center;font-size: 16px;width: 80px;list-style: none;}.container ::-webkit-scrollbar {display: none;}</style>
</head><body><div class="container"><nav class="nav"><ul class="con"><li>元素一</li><li>元素二</li><li>元素三</li><li>元素四</li><li>元素五</li><li>元素六</li><li>元素七</li><li>元素八</li></ul></nav></div>
</body></html>

设置滚动条隐藏: .container ::-webkit-scrollbar {display: none;}
此时效果已经实现,既可滑动对应元素的内容,也隐藏了滚动条。但是,ios上的滑动效果很不流畅,不利于用户体验,Android上是ok的;此时可以加上这样一句css代码(-webkit-overflow-scrolling: touch;),如下:

.nav {height: 100%;overflow-x: scroll;overflow-y: hidden;background-color: #999;/*解决ios上滑动不流畅*/-webkit-overflow-scrolling: touch;}

这时ios上滑动变得流畅了,但是又出现了一个新的问题,滚动条又重现了,如图:



现在的需求是:既要不出现滚动条,又要滑动流畅,可以使用接下来一个小技巧:
因为滚动条是出现nav这个标签元素上的,所以可以进行如下设置:**

.nav {/*width: 100%;*/height: 100%;overflow-x: scroll;overflow-y: hidden;background-color: #999;/*解决ios上滑动不流畅*/-webkit-overflow-scrolling: touch;/*纵向超出部分将会隐藏,即滚动条部分被挤出可视区域*/padding-bottom: 20px;}

PS:

1.nav的外层容器设置了固定高度,并且设置了内容溢出隐藏,所有nav的纵向的超出内容是不可见的,即:overflow:hidden;
2.padding-bottom等于20px并非固定值,只要你的设置的值大小足够将滚动条挤出可视区域即可。

说明:根据步骤更改对应的css样式,即可得出最终结果;也可直接访问完整代码:http://www.jianshu.com/p/f282b1cc24fb。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369061.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring Data Solr教程:配置

在我的Spring Data Solr教程的上一部分中&#xff0c;我们了解到Solr提供了一个类似REST的HTTP API&#xff0c;该API可用于向Solr索引添加信息并针对索引数据执行查询。 问题在于&#xff0c;在开发环境中运行单独的Solr实例有点麻烦。 但是&#xff0c;并非所有希望都因此而…

JavaAppArguments.java

思路&#xff1a;定义一个String类型的变量&#xff0c;用来接收每次args读取到的值&#xff0c;然后把String转换为int,然后计算输出sum。 流程图&#xff1a; 源代码&#xff1a; 截图&#xff1a; 转载于:https://www.cnblogs.com/xiaohaigege666/p/7635907.html

webpack 引入jquery和第三方jquery插件

1、引入jquery jQuery 直接在 html 中引入&#xff0c;然后在 webpack 中把它配置为全局即可。 index.html: <!DOCTYPE html><html><head><meta charset"UTF-8"><title><% htmlWebpackPlugin.options.title %></title>&…

Spring Data Solr教程:CRUD(差不多)

在我的Spring Data Solr教程的上一部分中&#xff0c;我们学习了如何配置Spring Data Solr。 现在该迈出一步&#xff0c;了解我们如何管理Solr实例中存储的信息。 此博客文章描述了我们如何向Solr索引添加新文档&#xff0c;如何更新现有文档的信息以及如何从索引中删除文档。…

数独项目--关键代码展示:

关键代码展示&#xff1a; //判断该数字在当前数独是否符合要求 int judge(int num, int ple){ int x ple / 9; //x表示数字的纵坐标 int y ple % 9; //y表示数字的横坐标 int qulx x / 3; int quey y / 3; //que表示9宫格的区域 for (int i 0; i < 9; i){ if (…

java svn 版本号_eclipse中的Java文件自动根据svn版本号生成注释

经常在java代码中看到以下的注释($Rev: $Date),是不是很酷,怎么生成的呢&#xff1f;/*** A FilterChain is an object provided by the servlet container to the developer* giving a view into the invocation chain of a filtered request for a resource. Filters* use th…

〖Mysql〗-- python操作数据库

【数据库进阶】 python 操作MYSQL数据库主要有两种方式&#xff1a;    使用原生模块&#xff1a;pymysql  ORM框架&#xff1a;SQLAchemy 一、pymysql 1.1下载安装模块 12第一种&#xff1a;cmd下&#xff1a;执行命令下载安装&#xff1a;pip3 install pymysql第二种&…

Sublime Text3—Code Snippets(自定义代码片段)

摘要 程序员总是会不断的重复写一些简单的代码片段&#xff0c;为了提高编码效率&#xff0c;我们可以把经常用到的代码保存起来再调用。 平时用sublime安装各种插件&#xff0c;使用Tab键快速补全&#xff0c;便是snippets&#xff08;可译为代码片段&#xff09;的一种。 …

JBoss AS7 JNDI和EJB 3.1命名更改

由于“功能培训”继续前进&#xff0c;而我们又没有使软件堆栈保持最新&#xff0c;因此我们的团队发现自己处于迁移的不可行位置&#xff1a; JBoss 4.2.3到AS 7.1.x&#xff08;当前为7.1.1&#xff09; EJB 2.1到EJB 3.1 休眠2到休眠3或4 以快速的方式。 我的意思是&…

static关键字(修饰函数、局部变量、全局变量)

在C语言中&#xff0c;static的字面意思很容易把我们导入歧途&#xff0c;其实它的作用有三条。 &#xff08;1&#xff09;先来介绍它的第一条也是最重要的一条&#xff1a;隐藏。 当我们同时编译多个文件时&#xff0c;所有未加static前缀的全局变量和函数都具有全局可见性。…

POJ 2236 - Wireless Network ( 并查集 )

题意 一个计算机网络里的计算机都坏了, 现在有两种操作, “O p”代表修复了p机器, “S p q”代表检查 p, q 两台机器是否连接( 直线距离<d或者中间有距离<d的用来联通的机器 ) 思路 比赛的时候愣是没读清楚题目意思, 还以为是什么搜索, 瞎瘠薄做了个MLE 没料到居然是个并…

Apriori 关联分析算法原理分析与代码实现

转自穆晨 阅读目录 前言关联分析领域的一些概念Apriori算法基本原理频繁项集检索实现思路与实现代码关联规则学习实现思路与实现代码小结回到顶部前言 想必大家都听过数据挖掘领域那个经典的故事 - "啤酒与尿布" 的故事。 那么&#xff0c;具体是怎么从海量销售信息中…

Spring JpaRepository示例(内存中)

这篇文章描述了一个使用内存中HSQL数据库的简单Spring JpaRepository示例。 该代码示例可从GitHub的Spring-JpaRepository目录中获得。 它基于带有注释的Spring-MVC-示例和此处提供的信息 。 JPA资料库 我们为该示例实现一个虚拟bean&#xff1a; Entity AutoProperty public…

java url接口_javaweb 后台使用url接口

String GET_URL"https://wx.hguard.cn:8075/queryProfiledataAction.action?phone"phone"&beginnum"beginnum"&pagesize"pagesize"&sign"newsignString;try {URL url new URL(GET_URL); // 把字符串转换为URL请求地址…

数据分析 - 残酷的世界

数据分析 - 残酷的世界 可视化作品链接地址&#xff1a;http://reinhardhsu.com/game.html 概要 最近读了比尔盖茨的夏日书单中的荐书《乡下人的悲歌》&#xff0c; 书中描述了贫穷、毒品和一系列陋习&#xff0c;像遗传病一样&#xff0c;困扰着一代又一代的美国底层人民…

burpsuite破解版

来源&#xff1a;http://www.vuln.cn/8847 转载于:https://www.cnblogs.com/shengulong/p/8819072.html

Eclipse Juno上带有GlassFish的JavaEE 7

Java EE 7很热。 前四个JSR最近通过了最终批准选票&#xff0c;与此同时GlassFish 4达到了升级版83。 如果您关注我的博客&#xff0c;那么您将了解NetBeans的大部分工作。 但是我确实认识到&#xff0c;那里还有其他IDE用户&#xff0c;他们也有权试用最新和最出色的企业Java。…

photoshop 切片工具进行切图

1、使用切片工具切图 2、存储为web所用格式 3、选择图片格式 4、只保存切片&#xff08;选择所有用户切片&#xff09; 5、查看&#xff1a;

HubSwitch工作原理,冲突域,以太网帧结构笔记(2017年10月9日 11:15:46)

一、冲突域 网络中发送的主要是应用程序产生的数据。 数据流需要网络设备进行数据转发&#xff0c;任何应用程序在发送数据流之前都要进行数据封装。 比如&#xff1a;SMAC DMAC | SIP DIP | 报头&#xff08;Source Port、Destination Port&#xff09;| QQ的数据载荷&#xf…

在IDEA中实战Git

工作中多人使用版本控制软件协作开发&#xff0c;常见的应用场景归纳如下&#xff1a; 假设小组中有两个人&#xff0c;组长小张&#xff0c;组员小袁 场景一&#xff1a;小张创建项目并提交到远程Git仓库 场景二&#xff1a;小袁从远程Git仓库上获取项目源码 场景三&#xff1…