纯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 ...
随机推荐
- JS :Date日期格式化
Date.prototype.format = function (formatStr) { var date = this; /* 函数:填充0字符 参数:value-需要填充的字符串, lengt ...
- LeetCode Array Easy 448. Find All Numbers Disappeared in an Array
Description Given an array of integers where 1 ≤ a[i] ≤ n (n = size of array), some elements appear ...
- elasticsearch 基础 —— _mget取回多个文档及_bulk批量操作
取回多个文档 Elasticsearch 的速度已经很快了,但甚至能更快. 将多个请求合并成一个,避免单独处理每个请求花费的网络延时和开销. 如果你需要从 Elasticsearch 检索很多文档,那 ...
- 【linux 进程杀死】批量杀死进程
一次杀死包含 api_antispan 开头的的所有进程 https://blog.csdn.net/u013421629/article/details/83512498
- Kvm--02 安装centos6系统 ,kvm磁盘管理
目录 1.安装一个CentOS6的系统的虚拟主机 2.虚拟机的备份 3.企业案例: 4.Kvm磁盘管理 1.安装一个CentOS6的系统的虚拟主机 #上传一个CenOS6系统的镜像到/opt目录下 [ ...
- Informatica参考
近日在做informatica项目时,要求参照informatica中原有的mapping方式实现.那么当知道源表或者目标表或者是映射时,如何快速的找出分散在不同的Subject的mapping或者是 ...
- HttpRunnerManager安装部署(centos7)
一.安装python3环境 参考 二.安装依赖环境 根据根目录requirements.txt文件安装依赖,可以使用pip安装 #pip3 install -r requirements.txt 会遇 ...
- js-ifelse-奇技淫巧
我们有A,B,C,D四个不同的类别,在最开始的时候只有三个类别,并且两个类别是做同样的事: function categoryHandle(category) { if(category !== 'A ...
- python 爬取<a>标签内href的方法及遇到的问题
原博客地址: https://www.cnblogs.com/dengyg200891/p/6060010.html # -*- coding:utf-8 -*- #python 2.7 #XiaoD ...
- boost compressedPair
boost::compressed_pair behaves like std::pair. However, if one or both template parameters are empty ...