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;横向滑动详细讲解的更多相关文章

  1. 纯css实现移动端横向滑动列表&&overflow:atuo;隐藏滚动条

    <!DOCTYPE html> <html> <head> <title>横向滑动</title> <style type=" ...

  2. ios7中使用scrollview来横向滑动图片，自动产生偏移竖向的偏移 问题

    ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题     如图红色为scrollview的背景色,在scrollview上加了图片之后,总会有向下的偏移 设置conten ...

  3. node+vue进阶【课程学习系统项目实战详细讲解】打通前后端全栈开发(1)：创建项目，完成登录功能

    第一章 建议学习时间8小时·分两次学习      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章]) 视频教程地 ...

  4. 实现移动端touch事件的横向滑动列表效果

    要实现手机端横向滑动效果并不难,了解实现的原理及业务逻辑就很容易实现.原理:touchstart(手指按下瞬间获取相对于页面的位置)——>touchmove(手指移动多少,元素相应移动多少). ...

  5. Siki_Unity_2-1_API常用方法和类详细讲解(下)

    Unity 2-1 API常用方法和类详细讲解(下) 任务101&102:射线检测 射线origin + direction:射线检测:射线是否碰撞到物体 (物体需要有碰撞器),碰撞物体的信息 ...

  6. 纯css实现移动端横向滑动列表

    前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题. 这个问题不知道iscroll本身能不能解决,当时选择了换一种方式 ...

  7. 纯css实现移动端横向滑动列表(可应用于ionic3移动app开发)

    前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题. 这个问题不知道iscroll本身能不能解决,当时选择了换一种方式 ...

  8. 微信小程序 scroll-view 左右横向滑动没有效果（无法滑动）问题

    小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过),经调试发现: 1.scroll ...

  9. C++语言堆栈的详细讲解

    本文主要向大家介绍了C++语言堆栈的详细讲解,通过具体的内容向大家展示,希望对大家学习C++语言有所帮助. 一.预备知识—程序的内存分配 一个由c/C++编译的程序占用的内存分为以下几个部分 1.栈区 ...

随机推荐

  1. EF框架搭建小总结--ModelFirst模型优先

    前言:去年刚工作的时候,也是刚刚正式接触.net,当时了解了EF以及三种开发模式,Database First.Model First .Code First.公司用的开发模式是Database Fi ...

  2. 批量下载验证码 shell

    #!/bin/sh seq 0 699 | xargs -i wget http://www.5184.com/gk/common/checkcode.php -O img/{}.png

  3. （@WhiteTaken）设计模式学习——组合模式

    下面来学习一下组合模式. 组合模式概念是什么呢.从别的地方抄来了一些理论. 理论:将对象组合成树形结构以表示"部分-整体"的层次结构.Composite模式使得用户对单个对象和组合 ...

  4. 【网络爬虫入门05】分布式文件存储数据库MongoDB的基本操作与爬虫应用

    [网络爬虫入门05]分布式文件存储数据库MongoDB的基本操作与爬虫应用 广东职业技术学院  欧浩源 1.引言 网络爬虫往往需要将大量的数据存储到数据库中,常用的有MySQL.MongoDB和Red ...

  5. Zookeeper 笔记-应用场景

    应用场景:数据发布,订阅:分布式应用配置项:分布式计数器:统一命名服务:状态同步服务:集群管理:Master选举:分布式锁:定时任务争夺:分布式队列:分布式协调通知 特点:顺序一致性,原子性,单一视图 ...

  6. Entity Framework Core 2.0 使用代码进行自动迁移

    一.前言 我们在使用EF进行开发的时候,肯定会遇到将迁移更新到生产数据库这个问题,前面写了一篇文章介绍了Entity Framework Core 2.0的入门使用,这里面介绍了使用命令生成迁移所需的 ...

  7. LeetCode 371. Sum of Two Integers （两数之和）

    Calculate the sum of two integers a and b, but you are not allowed to use the operator + and -. Exam ...

  8. 使用jQuery判断元素是否在可视区域

    $("#app").offset().top; offset().top表示 绝对偏移值,比如说有一个很长的页面,#app这个元素 在最底下,  $("#app" ...

  9. Android Studio 中修改Apk名称

    修改生成的apk名称,并且使调试时也可以使用. 在app->build.gradle 中增加以下内容: android.applicationVariants.all { variant-> ...

  10. Problem P

    题意:FJ养牛,他想知道中间的牛是那一头: 思路:这道题有点水,思路就不写了 #include #include #include #define maxn 10005 using namespace ...