overflow-x: scroll;横向滑动详细讲解
overflow-x: scroll;横向滑动（移动端使用详解）
css3 ， ie8以上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>横向滑动overflow-x: scroll</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.box1{
width: 100px;
height: 60px;
overflow: hidden;/* 超出隐藏滚动条 */
background-color: skyblue;
}
.box1 .wrap{
width: 100px;/* 和父盒子宽度一样 */
height: 76px;/* 比里层元素高16px 为了隐藏滚动条*/
overflow-x: scroll;/* 定义超出此盒子滚动 */
overflow-y: hidden;
}
.box1 .wrap ul{
width: 300px;
display: flex;
}
.box1 .wrap ul li{
flex: 1;
width: 60px;
height: 60px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1">
<div class="wrap">
<ul>
<li>1移动端</li>
<li>2可滑动</li>
<li>3ie8以上</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</body>
</html>
overflow-x: scroll;横向滑动详细讲解的更多相关文章
- 纯css实现移动端横向滑动列表&&overflow:atuo;隐藏滚动条
<!DOCTYPE html> <html> <head> <title>横向滑动</title> <style type=" ...
- ios7中使用scrollview来横向滑动图片，自动产生偏移竖向的偏移 问题
ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题 如图红色为scrollview的背景色,在scrollview上加了图片之后,总会有向下的偏移 设置conten ...
- node+vue进阶【课程学习系统项目实战详细讲解】打通前后端全栈开发(1)：创建项目，完成登录功能
第一章 建议学习时间8小时·分两次学习 总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章]) 视频教程地 ...
- 实现移动端touch事件的横向滑动列表效果
要实现手机端横向滑动效果并不难,了解实现的原理及业务逻辑就很容易实现.原理:touchstart(手指按下瞬间获取相对于页面的位置)——>touchmove(手指移动多少,元素相应移动多少). ...
- Siki_Unity_2-1_API常用方法和类详细讲解(下)
Unity 2-1 API常用方法和类详细讲解(下) 任务101&102:射线检测 射线origin + direction:射线检测:射线是否碰撞到物体 (物体需要有碰撞器),碰撞物体的信息 ...
- 纯css实现移动端横向滑动列表
前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题. 这个问题不知道iscroll本身能不能解决,当时选择了换一种方式 ...
- 纯css实现移动端横向滑动列表(可应用于ionic3移动app开发)
前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题. 这个问题不知道iscroll本身能不能解决,当时选择了换一种方式 ...
- 微信小程序 scroll-view 左右横向滑动没有效果（无法滑动）问题
小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过),经调试发现: 1.scroll ...
- C++语言堆栈的详细讲解
本文主要向大家介绍了C++语言堆栈的详细讲解,通过具体的内容向大家展示,希望对大家学习C++语言有所帮助. 一.预备知识—程序的内存分配 一个由c/C++编译的程序占用的内存分为以下几个部分 1.栈区 ...
随机推荐
- oracle导不出空表的解决办法
1.先进行表分析(一定要执行此步,否则查询空表可能不准确) select 'analyze table '||table_name||' compute statistics;' from user_ ...
- python第三课
本节内容 1.列表 2.购物车设计思路 3.字典 1.列表 不可变类型:整型.字符串.元组tuple 可变类型:列表list.字典dict 2.购物车 3.字典
- abapGit简介与教程
你是ABAP开发者?你用abapGit吗? 看到这个问题,读者也许会想,什么是abapGit?就让我们从这个问题开始.简单地说,abapGit是一个以ABAP写成为ABAP服务的Git客户端. 有的读 ...
- 基于HTML5及WebGl下生成的json格式的工控SCADA风机叶轮旋转
突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开.我用HT实现了我的想法,代码一百多行,这么少的代码 ...
- Python中如何防止sql注入
sql注入中最常见的就是字符串拼接,研发人员对字符串拼接应该引起重视,不应忽略. 错误用法1: sql = "select id, name from test where id=%d an ...
- NotePad++ 正则表达式替换 高级用法 [转]
转自:http://blog.csdn.net/gdp12315_gu/article/details/51730584 在我们处理文件时,很多时候会用到查找与替换.当我们想将文件中某一部分替换替换文 ...
- Vue源码后记-更多options参数（1）
我是这样计划的,写完这个还写一篇数据变动时,VNode是如何更新的,顺便初探一下diff算法. 至于vue-router.vuex等插件源码,容我缓一波好吧,vue看的有点伤. 其实在之前讲其余内置指 ...
- centos6.5配置uwsgi与nginx支持django
一.centos中升级python 1. > wget https://www.python.org/ftp/python/3.5.4/Python-3.5.4.tgz # https://ww ...
- Ignatius and the Princess IV（乱搞一发竟然过了）
B - Ignatius and the Princess IV Time Limit:1000MS Memory Limit:32767KB 64bit IO Format:%I64 ...
- Just a Hook（区间set）
Just a Hook Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...