前几天在公司做开发的时候碰到一个列表横向滑动的功能，当时用了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. MongoDB3.6版本新增特性

    MongoDB3.6版新特性如下: (1)Default Bind to Localhost 从3.6版本开始,在默认情况下,MongoDB二进制文件mongod和mongos绑定到localhost ...

  2. JavaScript的语法、数据类型、基本算数和逻辑运算操作

    str.toString() 可以把字符串.数值.布尔值.对象转为字符串 String(str) 任何数值强制转换为字符串类型 <!DOCTYPE html> <html lang= ...

  3. maven第一次创建项目太慢解决方法

    问题: 第一次用maven创建项目的时候,因为本地仓库中没有jar包,需要从中央仓库下载,所以会比较慢 解决方法: 因为从中央仓库下载默认使用的国外的镜像下载,速度比较慢,我们可以把镜像修改为从阿里云 ...

  4. Linux centos7 安装 phpMyAdmin

    yum install httpd php mariadb-server –y搭建lamp运行环境之后安装phpMyAdmin遇到的一些问题记录一下 1.官网下载phpMyAdmin压缩包 wget ...

  5. P1339 [USACO09OCT]热浪Heat Wave（SPFA）

    -------------------------------------- 农夫约翰再显神威,双向热浪,双倍数组 (双倍大小,否则RE) ------------------------------ ...

  6. 清北学堂—2020.1提高储备营—Day 2 morning（并查集、堆）

    qbxt Day 2 morning --2020.1.18 济南 主讲:李佳实 目录一览 1.并查集 2.堆 总知识点:基础数据结构 一.并查集 1.描述:并查集是一类十分常用的数据类型,它有着十分 ...

  7. MySQL优化(四)——读写分离

    1.MySQL高可用        主从复制      一主多备      多主多备        读写分离      减少IO开销,防止阻塞等等 2.主从复制参考 https://www.cnblo ...

  8. VS2019 backspace键失效，无法使用

    原因:据网上其他资源了解,可能是和其它的快捷键冲突了,但是我这边没有设置快捷键,突然就这样了,出现原因不详,有了解的伙伴可以留言学习一下. 解决方法:工具=>设置=>键盘=>点击重置

  9. JN_0013：win10快速回桌面

    4.最后一种方法是最为实用的方法.按快捷键[windows键+D键],如下图所示,两键同时按,或者先按住windows键不放再按D键.这种方法在任何时候都是有用的,并且熟练使用后可以达到非常快的速度: ...

  10. 【Jmeter】jmeter提取response中的返回值，并保存到本地文件--BeanShell后置处理器

    有个需求,需要在压测环境中,创建几十万的账号数据,然后再根据创建结果,查询到某些账号信息. 按照之前我的做法,直接Python调用API,然后再数据库查询: 但是近期所有开发人员的数据库访问权限被限制 ...