利用overflow-x实现横向滚动的xiaoguo
在进行app开发中经常遇到横向滚动的效果,相信很多人都是用js写的吧,其实用css的overflow-x也可以写出啦哦~~~
(1)介绍overflow-x:
1)浏览器支持
所有主流浏览器都支持 overflow-x 属性。
注释:overflow-x 属性无法在 IE8 以及更早的浏览器正确地工作。
2)定义:
是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话
3)语法(是滴,很熟悉):
4)代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>test overflow</title>
<style type="text/css">
/* 滚动的三要素:
1:父盒子设置width为100%,横向滚动overflow-x: scroll,不换行white-space: nowrap;
2.子元素设置为行内块级元素display: inline-block;
*/
* {
margin: 0;
padding: 0;
}
ul {
width: 100%;
padding: 20px;
border: 1px solid red;
overflow-x: auto;
white-space: nowrap;
}
li {
display: inline-block;
border: 1px solid yellow;
padding: 10px 30px;
}
</style>
</head>
<body>
<ul>
<li class="flex" >美妆</li>
<li class="flex" >服饰</li>
<li class="flex" >衣服</li>
<li class="flex" >化妆品</li>
<li class="flex" >童装</li>
</ul>
</body>
</html>
5)效果:
利用overflow-x实现横向滚动的xiaoguo的更多相关文章
- 【吉光片羽】js横向滚动与浮动导航
1.横向滚动,这个方法是见过最简洁的了. #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 117 ...
- js实现文字横向滚动
页面布局 <div id="scroll_div" class="fl"> <div id="scroll ...
- html5 tab横向滚动,无滚动条(transform:translate)
html5 横向滚动,用到了 touchstart.touchmove.touchend 控制修改transform:translate属性;[手机端或者浏览器模拟手机模式才有效果] [转载请注明出处 ...
- jQuery实现文字横向滚动效果
HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; o ...
- react-native 横向滚动的商品展示
在app中会有这种页面 像这样商品是横向的,而且要滚动,思路是利用 ScrollView 横向的滚动 思路: (a): 横向滚动的整体作为一个组件 ShopCenter {/*** 横向滚动 *** ...
- JS浏览器滚轮事件实现横向滚动照片展
if(window.attachEvent){ ///*IE8注册事件*/ this.oc.attachEvent('onmousewheel',function(e) { //函数体 }); } e ...
- H5实现横向滚动的方法总结
小程序中有横向滚动的swiper,H5中目前得手动实现. 实现方法如下: 外层需要设置: overflow: scroll;white-space: nowrap; 内层需要设置: display: ...
- 【CSS3】精美横向滚动菜单按钮
废话不多说,直接上图: 然后是代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- web开发 小方法1-禁止横向滚动
最近学了学做了个公司的网站 总结了一些小方法 比如取消横向滚动条并禁止的横向滚动 这样就可以吧超出的切掉让网页更和谐 在body 标签 body{ text-align: center; overf ...
随机推荐
- 1. Python3 环境搭建
Python3 环境搭建 开门见山,其他关于Python发展史.语言类型.优缺点等等 可以自己去百度百度,这里就不多说了.其实基本想要学这门语言的时候,你已经了解差不多了!!! Python的运行环境 ...
- kafka学习总结之kafka核心
1. Kafka核心组件 (1)replication(副本).partition(分区) 一个topic可以有多个副本,副本的数量决定了有多少个broker存放写入的数据:副本是以partitio ...
- 20135202闫佳歆--week2 操作系统是如何工作的--学习笔记
此为个人学习笔记存档 week 2 操作系统是怎么工作的 一.计算机是如何工作的?--三个法宝 (一)三个法宝 1.存储程序计算机 所有计算机的基础性的逻辑框架. 2.函数调用堆栈 在低级语言中并不很 ...
- LINUX内核分析第五周学习总结——扒开应用系统的三层皮(下)
LINUX内核分析第五周学习总结——扒开应用系统的三层皮(下) 张忻(原创作品转载请注明出处) <Linux内核分析>MOOC课程http://mooc.study.163.com/cou ...
- C++:钻石继承与虚继承
QUESTION:什么是钻石继承? ANSWER:假设我们已经有了两个类Father1和Father2,他们都是类GrandFather的子类.现在又有一个新类Son,这个新类通过多继承机制对类Fat ...
- C语言编程—自动生成四则运算升级版
#include<stdio.h> #include<time.h> struct fenshu { int fenzi; int fenmu; }Fenshu[]; int ...
- WordCount 程序的实现
WordCount是一个常见的工具,它能统计文本文件的字数.单词数和行数.在本次项目中,要求写一个命令行程序,模仿已有的WordCount.exe的功能,并加以扩充,统计出某程序设计语言源文件的字符数 ...
- SQL Server 删除重复数据只保留一条
DELETE FROM Bus_TerminalMessage_Keywords WHERE Content IN (select Content from Bus_TerminalMessage_K ...
- vue,react,angular本地配置nginx 环境单页面应用
一.起因:项目使用VUE,和react.构建单页面应用.在nginx的环境下只有一个index.html入口.这时候默认能够访问到vue,和react 路由 配置中的首页.内部连接也能够跳转但是不能给 ...
- ESXi主机性能问题
服务器遇到一个问题 百度了下 基本发现是 四路的 windows 服务器的问题. 造成一些 性能降低. 然后查看了下几个虚拟机 的确是设置的4个虚拟插槽 根据百度的结果 要么改配置文件 要么改 这个四 ...