前几天在公司做开发的时候碰到一个列表横向滑动的功能，当时用了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. LoaderTest加载测试用例的方法总结

    加载用例,可以用suite.addTest(测试类名("测试函数名"))实现,也可用过suit.addTest(loader.Loader....)实现,一下针对Loader的三个 ...

  2. Numerical Testing Reportes of A New Conjugate Gradient Projection Method for Convex Constrained Nonlinear Equations

    Numerical Testing Reportes of A New Conjugate Gradient Projection Method for Convex Constrained Nonl ...

  3. Spring cloud微服务安全实战 最新完整教程

    课程资料获取链接:点击这里 采用流行的微服务架构开发,应用程序访问安全将会面临更多更复杂的挑战,尤其是开发者最关心的三大问题:认证授权.可用性.可视化.本课程从简单的API安全入手,过渡到复杂的微服务 ...

  4. R语言入门：向量初探

    R语言主要用于统计,因此引入了向量这个概念将更好地进行统计计算,在其他无法引入向量的语言当中则会使用循环来计算一些大规模的数据,在R语言当中则不需要,下面我们来看看R语言当中向量的具体用法吧! 首先, ...

  5. MySQL概述及入门(一)

    MySql概述及入门(一) 什么是MySQL?    MySQL是当今主流的关系型数据库管理系统(记录是有行有列的数据库) , 可以与Oracle 和SQL Server 竞争 , 是最好RDBMS( ...

  6. opencv —— getTickCount、getTickFrequency 计时函数

    getTickCount 函数 返回 CPU 自某个事件(如启动电脑)以来走过的时钟周期数. getTickFrequency 函数 返回 CPU 一秒钟所走过的时钟周期数. 二者结合使用,可以用来计 ...

  7. fatal error LNK1169: one or more multiply defined symbols found

    在 Project/Setting/Link/General中的 Project Options: 加入 /FORCE:MULTIPLE即可")可以解决报错问题,但是这些问题全部变成了war ...

  8. 移动Web开发-WebApp（flex布局+移动端导航案例）

    实际开发中的像素:css像素设备像素比dpr=设备像素/css像素标清屏dpr=1 高清屏dpr=2缩放改变的是css像素大小PPI(每英寸的物理像素点)=根号(屏幕横向分辨率²+屏幕纵向分辨率²)/ ...

  9. ng--tolist说明

    起步 下载模板: git clone https://github.com/tastejs/todomvc-app-template.git --depth 1 初始化项目: ng new todom ...

  10. tensorflow数据统计

    本篇内容包括,tf.norm(张量的范数).tf.reduce_min/max(最大最小值).tf.argmax/argmin(最大最小值的位置).tf.equal(张量的比较).tf.unique( ...