前几天在公司做开发的时候碰到一个列表横向滑动的功能，当时用了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实现移动端横向滑动列表(可应用于ionic3移动app开发)的更多相关文章

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

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

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

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

  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. 【原创】关于pyinstaller打包的程序执行出错问题,pyinstaller3.5只支持matplotlib3.0.2已经解决

    之前,在用pyinstaller打包一个python程序时没有问题,后来不知道什么原因,再打包时出现了所谓的pyinstaller打包报错: RecursionError: maximum recur ...

  2. postgresql 文件布局

    我们知道linux中一个思想:一切皆文件,那么在我们安装完postgresql数据库后,她长什么样呢?本文带着你一起揭开她的面纱,看看postgresql的文件布局. 说明:由于安装测试的版本是10. ...

  3. ACM模板_axiomofchoice

    目录 语法 c++ java 动态规划 多重背包 最长不下降子序列 计算几何 向量(结构体) 平面集合基本操作 二维凸包 旋转卡壳 最大空矩形 | 扫描法 平面最近点对 | 分治 最小圆覆盖 | 随机 ...

  4. Web服务器开发

    ip地址和端口号 ip地址用来定位计算机 端口号用来定位具体的应用程序 一切需要联网通信的软件都会占用一个端口号 端口号的范围从0-65536之间 在计算机中有一些默认端口号最好不要使用 如http服 ...

  5. Git常用命令 - 随时更新

    1. 配置用户信息 git config --global user.name <name> git config --global user.email <email_addres ...

  6. 静态库&动态库&导入库

    我遇到的问题 先贴一个StackOverflow上的问题 上面的问题让我知道了更多动态库的知识. 我需要使用一个声音库(irrKlang)为2d游戏提供声音,我使用的编译器是mingw-w64,但是i ...

  7. 剑指offer-面试题48-最长不含重复字符的子字符串-动态规划

    /* 题目: 最长不含重复字符的子字符串. */ /* 思路: f(i) = f(i-1) + 1,(未出现过当前字符,distance > f(i-1) distance,当前字符和上一次出现 ...

  8. Wilson's Theorem

    ProofsSuppose first that $p$ is composite. Then $p$ has a factor $d > 1$ that is less than or equ ...

  9. 第1节-认识Jemeter

    1-Jemeter是什么 Apache JMeter是一款100%纯java实现的应用程序,它是开源的.该软件用于测试软件系统或应用程序的功能和性能. 最初设计这个软件的目的是用户测试web应用程序, ...

  10. web端常见测试

    一.登录注册功能 1.页面调转 2.tab键与enter键 3.密码加密显示,是否支持复制粘贴 4.账号密码校验 5.刷新页面,更新验证码 二.界面测试 1.样式.颜色.整体布局风格 2.最大化.最小 ...