纯css实现移动端横向滑动列表&&overflow:atuo;隐藏滚动条
<!DOCTYPE html>
<html>
<head>
<title>横向滑动</title>
<style type="text/css">
.slide-box{
margin-top: 200px;
display: -webkit-box;
overflow-x: scroll;
-webkit-overflow-scrolling:touch;
}
.slide-item{
width: 200px;
height: 200px;
border:1px solid #ccc;
margin-right: 30px;
}
</style>
</head>
<body>
<div class="slide-box">
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
</div>
</body>
</html> ==============================================
overflow:atuo;隐藏滚动条
动端页面为了更接近原生的体验，是否可以隐藏滚动条，同时又保证页面可以滚动？
使用 overflow:hidden 隐藏滚动条，但存在的问题是：页面或元素失去了滚动的特性。
由于只需要兼容移动浏览器（Chrome 和 Safari），于是想到了自定义滚动条的伪对象选择器
::-webkit-scrollbar。- 1
应用如下 CSS 可以隐藏滚动条：
.element::-webkit-scrollbar {display:none}- 1
如果要兼容 PC 其他浏览器（IE、Firefox 等），国外一位才人 John Kurlak 也研究出了一种办法。在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样，就变相隐藏了。
- <div class="outer-container">
- <div class="inner-container">
- <div class="content">
- ......
- </div>
- </div>
- </div>
- .outer-container,.content {
- width: 200px; height: 200px;
- }
- .outer-container {
- position: relative;
- overflow: hidden;
- }
- .inner-container {
- position: absolute; left: 0;
- overflow-x: hidden;
- overflow-y: scroll;
- }
- /* for Chrome */
- .inner-container::-webkit-scrollbar {
- display: none;
- }
纯css实现移动端横向滑动列表&&overflow:atuo;隐藏滚动条的更多相关文章
- 纯css实现移动端横向滑动列表
前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题. 这个问题不知道iscroll本身能不能解决,当时选择了换一种方式 ...
- 纯css实现移动端横向滑动列表(可应用于ionic3移动app开发)
前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题. 这个问题不知道iscroll本身能不能解决,当时选择了换一种方式 ...
- CSS实现移动端横向滑动
html: <div class="chosen-container"> <div class="chosen-swiper"> < ...
- 用css巧妙实现移动端横向滑动展示功能
前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用cs ...
- 【css】用css巧妙实现移动端横向滑动展示功能
前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用cs ...
- 实现移动端touch事件的横向滑动列表效果
要实现手机端横向滑动效果并不难,了解实现的原理及业务逻辑就很容易实现.原理:touchstart(手指按下瞬间获取相对于页面的位置)——>touchmove(手指移动多少,元素相应移动多少). ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
- 纯CSS实现移动端常见布局——高度和宽度挂钩的秘密
纯CSS实现移动端常见布局--高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...
- 解决移动端ios下overflow-x scroll无法隐藏滚动条的问题
这次有个需求是在web首页添加分类菜单,一共是8个分类,在移动端水平展示,可以左右滚动. 最后在手机上微信浏览器看到是有个滚动条,非常影响美观. 主要通过以下代码实现水平滚动 white-space: ...
随机推荐
- 【解决方案】SpringCloud项目优雅发版、部署
背景 SpringCloud分布式项目,部署在多个节点上.一般的发版方式是,使用Kill -15 pid,逐一地关闭.部署.重启. 但中间涉及到一个问题,当执行kill命令时,服务虽然关闭,但Eure ...
- .NET开发人员的完美.gitignore文件
# Build and Object Folders bin/ obj/ # Nuget packages directory packages/ ## Ignore Visual Studio te ...
- createElement与createDocumentFragment的一些小区别
在DOM操作里,createElement是创建一个新的节点,createDocumentFragment是创建一个文档片段. 网上可以搜到的大部分都是说使用createDocumentFragmen ...
- Mininet系列实验（六）：Mininet动态改变转发规则实验
一. 实验目的 熟悉Mininet自定义拓扑脚本的编写:熟悉编写POX脚本动态改变转发规则 二.实验原理 在SDN环境中,控制器可以通过对交换机下发流表操作来控制交换机的转发行为.在本实验中,基于Mi ...
- python matplotlib（数据可视化）
吐槽 网上搜了不少matplotlib安装方法(不信,你可以试试.) 我只能说,除了太繁琐,就是没什么用! 如果你是python3.6.5版本 我给你最最最正确的建议: 直接打开cmd,找到pip用命 ...
- docker-compose 布署应用nginx中的create-react-app应用获取环境变量
文章来源:https://www.freecodecamp.org/news/how-to-implement-runtime-environment-variables-with-create-re ...
- gis空间分析案例_7参数单坐标转换
gis空间分析案例_7参数单坐标转换 商务科技合作:向日葵,135-4855__4328,xiexiaokui#qq.com 功能: 对输入的单个坐标,利用7参数,一步进行坐标变换,使用极为直观,极大 ...
- 解决Visual Studio:"无法导入以下密钥文件: xxxx.pfx,该密钥文件可能受密码保护"
[解决方法] 从开始菜单找到并打开Visual Studio 命令提示(2010):开始->Microsoft Visual Studio 2010->Visual Studio Tool ...
- 001-http-总览、文件配置、常用http client、http连接池
一.概述 http请求项目搭建:地址:https://github.com/bjlhx15/common-study.git 中的common-http 主要针对post请求中的,form表单[app ...
- javascript——语法 && 结构
原文链接:Understanding Syntax and Code Structure