纯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: ...
随机推荐
- Linux perl: warning: Setting locale failed.perl: warning: Please check that your locale settings:
使用 apt-get 安装软件时,总是出现下面的错误. perl: warning: Setting locale failed. perl: warning: Please check that y ...
- Mininet系列实验（三）：Mininet命令延伸实验扩展
1 实验目的 熟悉Mininet自定义拓扑三种实现方式:命令行创建.Python脚本编写.交互式界面创建. 2 实验原理 Mininet 是一个轻量级软件定义网络和测试平台:它采用轻量级的虚拟化技术使 ...
- 阿里云OSS的 存储包、下行流量包、回流流量包 三者有啥关系
阿里云OSS的 存储包.下行流量包.回流流量包 三者有啥关系 一.总结 一句话总结: 你把文件放 oss,会占用存储空间,存储包覆盖这部分费用 你访问存储在 oss 里面的文件,会产生下行流量,就是从 ...
- vsCode中如何根据屏幕宽度自动换行
在设置中搜索editor.wordWrap 文章来源:外星人来地球 欢迎关注,有问题一起学习欢迎留言.评论
- python arcgis
- vue——vuex安装及使用
一.vuex 的理解 官方解释:vuex是一个专为vue.js应用程序开发的状态管理模式.采用集中式存储管理应用的所有的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 我的理解:全局变量,同 ...
- 【SpringBoot/MVC】从Oracle下载百万条记录的CSV
工程下载地址:https://files.cnblogs.com/files/xiandedanteng/CsvDownloadOracle20191110-2.rar 画面: 核心代码: 控制器: ...
- gis空间分析案例教程-下篇预告
1. 三维空间坐标转换,地理处理工具 2. 3参数,7参数计算,地理处理工具 3. 3参数,7参数坐标转换,地理处理工具 4. 坐标转换工具箱:集成高斯投影,参数计算,坐标转换所有功能. 作业:GIS ...
- PAT 甲级 1050 String Subtraction (20 分) （简单送分,getline(cin,s)的使用）
1050 String Subtraction (20 分) Given two strings S1 and S2, S=S1−S2 is defined to be t ...
- js下利用userData实现客户端保存表单数据
对于多数网页制作的朋友,实现在客户端保存在网页表单上的信息,比较多的是采用Cookie技术来实现,这些功能例如:下拉列表框选择的选项,文本框输入的数据等. 事实上,我们可以利用微软DHTML默认行为中 ...