纯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: ...
随机推荐
- Windows下的apache tomcat安装与配置
在官网http://tomcat.apache.org下载apache tomcat,我下载的是7可以自行选择版本: 解压缩,把解压文件放入C盘根目录下 配置环境变量,变量名位CATLINA_HOME ...
- centos上安装Python并修复yum
date: 2019-07-01 18:09:53 author: headsen chen notice: 个人原创 1,安装python3.7: yum install zlib-devel b ...
- StyleCop学习笔记-文档规则
文档规则: .SA1600:ElementsMustBeDocumented元素必须添加注释 .SA1601: PartialElementsMustBeDocumented Partial修饰的成员 ...
- 《最长的一帧》 osg3.4 osgViewer::View::init() osgViewer::Viewer::getContexts()
开始:osgViewer/ViewerBase.cpp 389行,startThreading()函数,启动线程 void ViewerBase::startThreading() { if ...
- centos6.8yum 安装mysql
1:查看是否已有mysql版本 rpm -qa | grep mysql 删除mysql 账号和用户组 删除/etc/my.cnf 2:有的话就删除 rpm -e mysql-...... 或者 co ...
- DB2存储过程简单示例
在这个示例中,我们将在DB2中创建一个名为DEMO1201的存储过程. 该存储过程的输入参数IN_NAME和IN_CREDITCARD,表示用户的姓名和身份证号. 该存储过程的作用是根据身份证号来新建 ...
- Jenkins加入systemctl管理
Jenkins安装目录为 /usr/local/jenkins-tomcat/ 添加文档 /usr/lib/systemd/system/jenkins.service [Unit] Descript ...
- 图像Resize中0.5像素中心对齐的问题
目录 0.5像素对齐的问题 0.5像素对齐的问题 1. 问题提出 在进行图像缩放时,偶尔会看到一些比较奇怪的代码,其中有一个就是0.5像素中心对齐的问题,例如在OpenCV线性插值的代码中有类似如下操 ...
- Direct2D 学习笔记 前言
Direct2D模板程序网址:https://docs.microsoft.com/zh-cn/windows/win32/direct2d/direct2d-quickstart DirectX S ...
- 如何使用CLI命令行部署VMware VCSA 6.5
在本文中,我们讨论如何使用CLI部署VMware vCSA 6.5,vCSA 6.0提供了两种实现类型,向导和脚本化.我们将使用一个名为vcsa-deploy的实用程序进行CLI安装.同样vcsa-d ...