在进行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的更多相关文章

  1. 【吉光片羽】js横向滚动与浮动导航

    1.横向滚动,这个方法是见过最简洁的了. #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 117 ...

  2. js实现文字横向滚动

    页面布局      <div id="scroll_div" class="fl">         <div id="scroll ...

  3. html5 tab横向滚动,无滚动条（transform：translate）

    html5 横向滚动,用到了 touchstart.touchmove.touchend 控制修改transform:translate属性;[手机端或者浏览器模拟手机模式才有效果] [转载请注明出处 ...

  4. jQuery实现文字横向滚动效果

    HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; o ...

  5. react-native 横向滚动的商品展示

    在app中会有这种页面 像这样商品是横向的,而且要滚动,思路是利用 ScrollView 横向的滚动 思路: (a): 横向滚动的整体作为一个组件  ShopCenter {/*** 横向滚动 *** ...

  6. JS浏览器滚轮事件实现横向滚动照片展

    if(window.attachEvent){ ///*IE8注册事件*/ this.oc.attachEvent('onmousewheel',function(e) { //函数体 }); } e ...

  7. H5实现横向滚动的方法总结

    小程序中有横向滚动的swiper,H5中目前得手动实现. 实现方法如下: 外层需要设置: overflow: scroll;white-space: nowrap; 内层需要设置: display: ...

  8. 【CSS3】精美横向滚动菜单按钮

    废话不多说,直接上图: 然后是代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  9. web开发 小方法1-禁止横向滚动

    最近学了学做了个公司的网站  总结了一些小方法 比如取消横向滚动条并禁止的横向滚动 这样就可以吧超出的切掉让网页更和谐 在body 标签 body{ text-align: center; overf ...

随机推荐

  1. Linux内核分析——第五周学习笔记

    第五周 扒开系统调用的“三层皮”(下) 一.知识点总结 (一)给MenuOS增加time和time-asm命令 在实验楼中,首先 强制删除menu (rm menu -rf) 重新克隆一个新版本的me ...

  2. 通俗易懂的word2Vec负采样理解

    理解:http://www.shuang0420.com/2017/03/21/NLP%20%E7%AC%94%E8%AE%B0%20-%20%E5%86%8D%E8%B0%88%E8%AF%8D%E ...

  3. Alpha冲刺-第一天

    1.1 今日完成任务情况以及遇到的问题. 完成任务情况 杜世康:弹幕的爬取 刘丹,李玉莹:系统统计功能实现 曹莹雯,尹楠: 主播管理功能实现 王静雅 :团队编码规范说明与本次博文撰写 遇到的问题 在爬 ...

  4. C# 项目迁移 Microsoft.VisualStudio.Tools.Office.BuildTasks 生成解决方法报错：请确认 <UsingTask> 声明正确，该程序集及其所有依赖项都可用

    问题定位: 1.在Server2003上使用vs2010开发的项目,移到Win8上,同样使用vs2010打开.在生成解决方案的时候有如下报错: 未能从程序集 Microsoft.VisualStudi ...

  5. Java对象与Map间相互转换

    将Java对象转为一个Map,以及将map转为对应Java对象,代码如下: public class BeanMapUtil { private static ConcurrentHashMap< ...

  6. js写插件教程深入

    原文地址:https://github.com/lianxiaozhuang/blog 转载请注明出处 js 写插件教程深入 1.介绍具有安全作用域的构造函数 function Fn(name){ t ...

  7. 知识点【JavaScript模块化】

    JavaScript模块化历程 JavaScript发展变迁大概是一下几个步骤: 工具(浏览器兼容) 组件(功能模块) 框架(功能模块组织) 应用(业务模块组织) 但是经过了长长的后天努力过程Java ...

  8. MySQL5.7 的编译安装

    转: 5.7的安装: https://www.insp.top/article/make-install-mysql-5-7 5.6的安装: https://www.chenyudong.com/ar ...

  9. Tour HDU - 3488（最大权值匹配）

    Tour In the kingdom of Henryy, there are N (2 <= N <= 200) cities, with M (M <= 30000) one- ...

  10. 【BZOJ1970】[AHOI2005]矿藏编码（模拟）

    [BZOJ1970][AHOI2005]矿藏编码(模拟) 题面 BZOJ 洛谷 题解 随便写个高精度模拟一下就完了. #include<iostream> #include<cstd ...