纯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;
}
正确代码
<!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;
/*解决ios上滑动不流畅*/
-webkit-overflow-scrolling: touch;
padding-bottom: 20px;
} .con {
width: 640px;
height: 100%;
display: flex;
align-items: center;
} .con>li {
text-align: center;
font-size: 16px;
width: 80px;
color: #fff;
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>
PS：
1.nav的外层容器设置了固定高度，并且设置了内容溢出隐藏，所有nav的纵向的超出内容是不可见的，即：overflow:hidden;
2.padding-bottom等于20px并非固定值，只要你的设置的值大小足够将滚动条挤出可视区域即可。
纯css隐藏移动端滚动条解决方案（ios上流畅滑动）---转载的更多相关文章
- 纯css隐藏移动端滚动条解决方案（ios上流畅滑动）
纯css隐藏移动端滚动条解决方案(ios上流畅滑动) html代码展示(直接复制代码保存至本地文件运行即可): <!DOCTYPE html> <html lang="en ...
- 纯CSS实现移动端常见布局——高度和宽度挂钩的秘密
纯CSS实现移动端常见布局--高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...
- 纯css实现移动端横向滑动列表&&overflow:atuo;隐藏滚动条
<!DOCTYPE html> <html> <head> <title>横向滑动</title> <style type=" ...
- css实现移动端滚动条隐藏仍然可以滚动内容
.g-panel { height: calc(100% - 112px); overflow: auto; &::-webkit-scrollbar { display: none; // ...
- 移动端项目在ios上输入框聚焦难解决方案
由于引入fastclick导致ios端input.textarea输入框难以点击聚焦,解决方案如下: 找到项目中的fastclick依赖或在main.js中改写fastclick的focus实现.
- CSS隐藏overflow默认滚动条同时保留滚动效果
主要应用于移动端场景,仿移动端滚动效果.对于隐藏滚动条,众所周知overflow:hidden,但是想要的滚动效果也没了. 所以对于移动端webkit内核提供一个伪类选择器: .element::-w ...
- 纯css实现移动端横向滑动列表
前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题. 这个问题不知道iscroll本身能不能解决,当时选择了换一种方式 ...
- 纯css实现移动端横向滑动列表(可应用于ionic3移动app开发)
前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题. 这个问题不知道iscroll本身能不能解决,当时选择了换一种方式 ...
- 纯CSS垂直居中的四种解决方案
总结了几种解决方法 但也不是说除了我说的就没有其他方法了 第一个.利用flex布局 代码: 效果: 第二个.利用transform 的 translate属性 代码: 效果: 第三个.使用伪类::af ...
随机推荐
- this的指向问题 call apply bind 中的this
在函数中this指向谁: 函数中的this指向谁,是由函数被调用的那一刻就确定下来的 平时确定一个函数中的this是谁,我们需要通过调用模式来确定 1. 函数调用模式 this ---> ...
- 使用transporter同步MongoDB数据到es
由于logstash不支持MongoDB自定义主键导入es,所以使用transporter导入数据. 版本:es5.x,transporter0.25, es6以上不允许一个索引下面多个type,tr ...
- MySQL --13 主从复制
目录 一.主从复制简介 二.主从复制原理 三.主从复制搭建实战 四.主从复制基本故障处理 五.延时从库 企业案例: 模拟环境 一.主从复制简介 复制是 MySQL 的一项功能,允许服务器将更改从一个实 ...
- Ubuntu 服务器Webmin错误的解决
一:This web server is running in SSL mode. Try the URL https://***********:10000/ instead. 解决方案: 1.ss ...
- extjs6.0 treepanel设置展开和设置选中
var treePanel = { id: "treeUrl", xtype: "treepanel", useArrows: true, // 节点展开+,- ...
- python使用bs4爬取boss静态页面
思路: 1.将需要查询城市列表,通过城市接口转换成相应的code码 2.遍历城市.职位生成url 3.通过url获取列表页面信息,遍历列表页面信息 4.再根据列表页面信息的job_link获取详情页面 ...
- oracle集合的应用
union:求并集,公共部分只包含一个 ABC 和AB都没有显示出来 2:union all 相同的数据会包含两个 3:交集 intersect 既包含A又包含B 4:求差集 A集合中的数据B集合中 ...
- 10.27 sort
排序命令sort选项与参数:-f :忽略大小写的差异,例如 A 与 a 视为编码相同:-b :忽略最前面的空白字符部分:-M :以月份的名字来排序,例如 JAN, DEC 等等的排序方法:-n :使用 ...
- Docker(应用服务引擎)
Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...
- [CSU1806]Toll
题目:Toll 传送门:http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1806 题目简述:给定n个点m条有向边的有向图,每条边的花费是$b_i ...