html自动移动滚动条,css隐藏移动端滚动条并平滑滚动
HTML代码如下
移动端隐藏滚动条解决方案
*{
padding:0;
margin:0;
}
.par-type{
height:50px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
overflow:hidden;
}
.type{
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;
color:#fff;
list-style:none;
}
.par-type::-webkit-scrollbar{
display:none;
}
- 推荐
- 娃娃
- 日用品
- 美妆护肤
- 娃娃
- 日用品
- 美妆护肤
- 娃娃
设置滚动条隐藏
.par-type::-webkit-scrollbar{display:none;}
此时内容可以正常滚动,滚动条也已隐藏,但是ios手机上出现滚动不流畅,影响用户的体验,安卓手机上是正常的。此时,加上css代码:-webkit-overflow-scrolling:touch;即可解决,如下:
.type{
height:100%;
overflow-x:scroll;
overflow-y:hidden;
background-color:#999;
/*解决ios上滑动不流畅*/
-webkit-overflow-scrolling:touch;
}
但是此时又会出现新的问题,滚动条又出现了!!!
为了用户的体验,最好是能流畅滚动并且滚动条是隐藏的,接下来开始放大招了。。。
滚动条是出现在type标签上的,所以对type进行如下设置:
.type{
/*width:100%;*/
height:100%;
overflow-x:scroll;
overflow-y:hidden;
background-color:#999;
/*解决ios上滑动不流畅*/
-webkit-overflow-scrolling:touch;
/*纵向超出部分将会隐藏,即滚动条部分被挤出可视区域*/
padding-bottom:20px;
}
ps:
1.type的外层容器设置了固定高度,并且设置了内容溢出隐藏,所有type的纵向的超出内容是不可见的,即:overflow:hidden;
2.padding-bottom等于20px并非固定值,只要你的设置的值大小足够将滚动条挤出可视区域即可。
完整代码如下:
移动端隐藏滚动条解决方案
*{
padding:0;
margin:0;
}
.par-type{
height:50px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
overflow:hidden;
}
.type{
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;
}
.par-type::-webkit-scrollbar{
display:none;
}
- 推荐
- 娃娃
- 日用品
- 美妆护肤
- 娃娃
- 日用品
- 美妆护肤
- 娃娃
本文转载自中文网
html自动移动滚动条,css隐藏移动端滚动条并平滑滚动相关推荐
- 纯css隐藏移动端滚动条解决方案(ios上流畅滑动)
html代码展示(直接复制代码保存至本地文件运行即可): <!DOCTYPE html> <html lang="en"><head><m ...
- css隐藏移动端滚动条(兼容ios)
尝试过很多类似 .container ::-webkit-scrollbar {display: none;}操作会发现,这些在苹果浏览器根本就不起效果. 既要隐藏滚动条.滑动流畅,还要兼容ios,可 ...
- [css] 使用overflow: scroll时不能平滑滚动怎样解决?
[css] 使用overflow: scroll时不能平滑滚动怎样解决? scroll-behavior: smooth; 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很 ...
- html overflow隐藏滚动条,css隐藏滚动条方法
我们在前端开发过程中经常会遇到这种情况,在一小块的内容上会加上滚动条,但是为了美观我们会隐藏滚动条还需要支持滚动,最容易的办法就是使用iscroll插件来实现,但这不是我们想要的,细想一下,现在css ...
- CSS: scroll-behavior: smooth;让页面平滑滚动
凡是需要滚动的地方都能加一句scroll-behavior:smooth:来提升用户滚动体验! 比如描点定位功能就有了平滑定位的效果 < a href="#" > T ...
- html设置自动滚动条,css滚动条设置
用css怎么设置div滚动条的样式,可改变大小的 overflow: auto; 在需要时内容会自动添加滚动条 overflow: scroll; 总是显示滚动条 overflow-x: hidden ...
- html 纵向滚动条,css设置纵向滚动条
css 怎样设置总是显示竖滚动条 给元素设置样式overflow-y:scroll; 和一个高度,当内容填满后就会出现下拉的滚动条了. CSS 如何添加水平滚动条 CSS 如何添加水平滚动条 我知道怎 ...
- 实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
- 【前端大概一分钟】css隐藏滚动条同时可以滚动
1. 通过 ::-webkit-scrollbar 伪元素 .inner-container::-webkit-scrollbar {display: none; } 复制代码 简单粗暴,但是兼容性不 ...
最新文章
- [HTML]增加input标签的multiple属性上传的文件数
- mongo-yum安装-配置用户权限
- java课程之团队开发冲刺1.8
- 字符集和编码规范:ASCII,Unicode和UTF-8, latin1,BIG5,GBK
- python如何并发运行2个软件_如何利用并发性加速你的python程序(二):I/O 绑定程序加速...
- CentOS 6.5配置本地YUM源
- MATLAB在运筹学背包问题的应用,运筹学论文之二维背包问题.docx
- c#.net获取当前进程的句柄数量
- 基于SSM的电脑商城
- 手机版wps支持格式
- MES系统架构初版ZXW
- 笔记本键盘失灵怎么办? 笔记本电脑按键失灵的一般解决办法
- c++中char[]与char*的转换以及char*与数字互转
- 常微分方程matlab求解英文文献,常微分方程及其matlab求解毕业论文设计
- win7安装vmware+ubuntu16.04
- 苹果开放降级通道_iOS 12.2的验证通道已关闭,两款机型可降级!
- HTML实现简单的点击播放和暂停音乐
- linux-mariadb
- 思科模拟器入门基础-交换机Telnet远程登录
- 处理VR透镜畸变的三种方法