前几天在公司做开发的时候碰到一个列表横向滑动的功能，当时用了iscroll做，结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题。

这个问题不知道iscroll本身能不能解决，当时选择了换一种方式来做，只要css就能搞定了，主要是利用了display:-webkit-box来实现。

<!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>

纯css实现移动端横向滑动列表的更多相关文章

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

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

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

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

  3. CSS实现移动端横向滑动

    html: <div class="chosen-container"> <div class="chosen-swiper"> < ...

  4. 用css巧妙实现移动端横向滑动展示功能

    前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用cs ...

  5. 【css】用css巧妙实现移动端横向滑动展示功能

    前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用cs ...

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

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

  7. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  8. 纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

    纯CSS实现移动端常见布局--高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...

  9. 纯css隐藏移动端滚动条解决方案（ios上流畅滑动）

    纯css隐藏移动端滚动条解决方案(ios上流畅滑动) html代码展示(直接复制代码保存至本地文件运行即可): <!DOCTYPE html> <html lang="en ...

随机推荐

  1. nginx配置文件分开配置

    在Linux中不同的用户都可能用到Nginx,如果不同的用户无法达成一个对nginx.conf编写标准,势必会导致nginx.conf里的内容变的相当混乱,极难维护.所以这里建议新建一个文件夹,这个文 ...

  2. ASP.NET生命周期详解（转）

    看到好文章需要分享. 最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多 ...

  3. 洛谷P2312 解方程(暴力)

    题意 题目链接 Sol 出这种题会被婊死的吧... 首先不难想到暴力判断,然后发现连读入都是个问题. 对于\(a[i]\)取模之后再判断就行了.注意判断可能会出现误差,可以多找几个模数 #includ ...

  4. Java开发坏境配置

    在"系统变量"中设置3项属性,JAVA_HOME,PATH,CLASSPATH(大小写无所谓),若已存在则点击"编辑",不存在则点击"新建" ...

  5. [C#] SHA1校验函数用法

    首先引用这个命名空间 using System.Security.Cryptography; //建立SHA1对象 SHA1 sha = new SHA1CryptoServiceProvider() ...

  6. 不要在using语句中调用WCF服务

    如果你调用WCF服务时,像下面的代码这样在using语句中进行调用,需要注意一个问题. using (CnblogsWcfClient client = new CnblogsWcfClient()) ...

  7. Linux下创建vue项目

    前提:已经安装了node.js.cnpm 1.全局安装vue脚手架vue-cli:#cnpm install -g vue-cli 注意:全局安装没有建立软链接前是无法使用刚刚安装的vue命令的,所以 ...

  8. NO.005-2018.02.10《南歌子词二首 / 新添声杨柳枝词》唐代：温庭筠

    南歌子词二首 / 新添声杨柳枝词_古诗文网 南歌子词二首 / 新添声杨柳枝词 唐代:温庭筠(yún) 一尺深红胜曲尘,天生旧物不如新.(胜曲尘 一作:蒙曲尘)一袭深红色的长裙日子久了便蒙上了淡黄色,自 ...

  9. linux下使用libxml2实现对xml文件的读取及查询

    由于项目需要,这两天在用C++做XML文件解析的工作.在linux下有个很方便的操作xml文件的库——libxml2,它提供了一套创建和查询xml文件的C语言的接口.这篇博客主要介绍如何使用libxm ...

  10. Uva 11491 暴力贪心

    题意:给一个n长度的整数,删掉 k 个数字,使得剩下的数字最大. 分析:还剩 n-k 个数字,就是在原序列里面,相对顺序不变的情况下,这个n-k个数字组成的数最大. 感觉没有什么特别好的方法策略,看了 ...